The code is for making a digital clock, what's the use of putting a setTimeout function in the showTime function and what is the use of setting both the textcontent and Innertext
function showTime(){
var date = new Date();
var h = date.getHours();// 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
<div id="MyClockDisplay" class="clock"></div>
You need to call setTimeout at the bottom of showTime so that each call of showTime will queue up the function to run again in 1 second - which, when run, will queue the function again after another second, and so on. Having a function recursively call itself with setTimeout is an alternative to using setInterval.
textContent is generally preferable over innerText - see The poor, misunderstood innerText, though if you're just assigning rather than getting, it doesn't matter much. innerHTML isn't appropriate here because you're assigning text, not HTML markup.
Using setInterval rather than a recursive setTimeout would look like this, accomplishing the exact same thing:
function showTime() {
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
}
showTime();
setInterval(showTime, 1000);
<div id="MyClockDisplay" class="clock"></div>
The use of the setTimeout is to set next count down for next second.
The use of Innertext is to set the time string to the element .
Innertext and textcontent are the same here.
Maybe you can try SetInterval as below to be more accurate:
function showTime(){
var date = new Date();
var h = date.getHours();// 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
}
showTime();
setInterval(showTime, 1000);
Related
I followed a tutorial on YT on how to put a clock, I've copied the exact code (well not exactly because of the "id") mine seems to be not working. this is my code
const hourEl = document.getElementsById ("hour");
const minuteEl = document.getElementById("minutes");
const secondsEl = document.getElementById("seconds");
const ampmEl = document.getElementById("ampm");
function updateClock (){
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let ampm = "AM";
if(h> 12) {
h = h - 12;
ampm= "PM";
}
h = h > 10 ? "0" + h: h;
m = m > 10 ? "0" + m: m;
s = s > 10 ? "0" + s: s;
hourEl.innerText = h;
minuteEl.innerText = m;
secondsEl.innerText = s;
ampmEl, (innerText= ampm);
setTimeout(()=>{
}, 1000)
}
updateClock();
Mostly you just need to call the function from your timeout, but then you need to flip your > to < in your comparison, and fix a few typos (document.getElementsById, for example, should be document.getElementById):
const hourEl = document.getElementById ("hour");
const minuteEl = document.getElementById("minutes");
const secondsEl = document.getElementById("seconds");
const ampmEl = document.getElementById("ampm");
function updateClock (){
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let ampm = "AM";
if(h> 12) {
h = h - 12;
ampm= "PM";
}
h = h < 10 ? "0" + h: h;
m = m < 10 ? "0" + m: m;
s = s < 10 ? "0" + s: s;
hourEl.innerText = h;
minuteEl.innerText = m;
secondsEl.innerText = s;
ampmEl, (innerText= ampm);
setTimeout(()=>{
updateClock()
}, 1000)
}
updateClock();
div {
display: inline-block;
}
<div id="hour"></div>:
<div id="minutes"></div>:
<div id="seconds"></div>
<div id="ampm"></div>
I'm (very) new to javascript, would appreciate someone explaining how I could fix this.
I have two very similar bits of code for a digital clock - difference is that one is an hour ahead of the other. (var time = h + 1 in one, and var time = h in the other)
When I put both on the same page, only one runs.
First bit of code:
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " WST";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + 1 + ":" + m + "" + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
Second bit of code:
<script>
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " GMT";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + ":" + m + "" + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
The html I use with these is:
<div id="MyClockDisplay” class="clock" onload="showTime()"></div>
🤞 someone can help me - many thanks in advance.
The code itself works fine. You have to be more specific about "what" does not work.
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " WST";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + 1 + ":" + m + "" + session;
console.log(time);
}
function showTime2(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var session = " GMT";
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
var time = h + ":" + m + "" + session;
console.log(time);
}
showTime();
showTime2();
I need to display the month, date and year in addition to the time.
I have tried to create variables for the month, day and year and then get element by ID. Example of how I was trying to do it:
var d = date.getDay();
var mn = date.getmonth();
var y = date.getFullYear();
EDIT: Here is my current code. I have to have a clock as well, but I have successfully coded it.
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
<div id="MyClockDisplay" class="clock"></div>
<div id="Month"></div>
<div id="Day"></div>
<div id="Years"></div>
You are on the right track if you follow the same pattern you used to build your clock in order to build the date, but you are misunderstanding some of the JavaScript date methods. getDay() returns a numerical value for the day of the week (0 for Sunday, etc), so instead you need to use getDate() to return the day of the month. Also, be aware that getMonth() returns the month index starting at 0 for January so you have to make an adjustment when displaying your date.
You could accomplish the same thing with a lot less code, but the example below follows your pattern so that it will hopefully be a bit easier for you to follow.
function showTime() {
var timediv = document.getElementById("myClockDisplay");
var datediv = document.getElementById("myDateDisplay");
var dt = new Date();
var d = dt.getDate();
var m = dt.getMonth() + 1; // getMonth() returns the month "index" starting with 0 for Jan
var y = dt.getFullYear();
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
var session = "AM";
if (hh == 0) {
hh = 12;
}
if (hh > 12) {
hh = hh - 12;
session = "PM";
}
d = (d < 10) ? "0" + d : d;
m = (m < 10) ? "0" + m : m;
hh = (hh < 10) ? "0" + hh : hh;
mm = (mm < 10) ? "0" + mm : mm;
ss = (ss < 10) ? "0" + ss : ss;
timediv.textContent = hh + ":" + mm + ":" + ss + " " + session;
datediv.textContent = m + "/" + d + "/" + y;
setTimeout(showTime, 1000);
}
showTime();
<div id="myClockDisplay" class="clock"></div>
<div id="myDateDisplay"></div>
Please see below . working copy of your code.
<html>
<body onload='showTime()'>
<h1>Show a push button:</h1>
<form>
<div id="MyClockDisplay" class="clock"></div>
<div id="Month"></div>
<div id="Day"></div>
<div id="Years"></div>
</form>
<script>
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
// document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
I am using javascript to show total time elapsed on my website with following code.
It is working correctly....but the problem is when seconds = 0, it's field is empty and when seconds and minutes are between 1 to 9, it is showing one digit.Instead I want to show as follows
if 59 seconds then == 00:00:59 (curretnly showing 59)
if 62 seconds then == 00:01:02 (currently showing 1:2)
if 70 seconds then == 00:01:10 (currently showing 1:10)
if 3640 seconds then == 01:00:40 (currently showing 1:0:40)
I mean fields shown should be fixed with
00:00:00 (hh:mm:ss)
format
javascript code using as follows :
var timeStamp = Date.now(),
sessionStamp = sessionStorage.getItem('ts'),
elapsedTime;
if (!sessionStamp) {
sessionStorage.setItem('ts', timeStamp.toString());
sessionStamp = timeStamp;
} else {
sessionStamp = parseInt(sessionStamp);
}
function increment() {
elapsedTime = Date.now() - sessionStamp;
d1= Math.round(elapsedTime / 1000).toString();
d = Number(d1);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
var s = Math.floor(d % 3600 % 60);
var hDisplay = h > 0 ? h + (h == 1 ? ":" : ":") : "";
var mDisplay = m > 0 ? m + (m == 1 ? ":" : ":") : "";
var sDisplay = s > 0 ? s + (s == 1 ? "0" : "") : "";
document.getElementById('elapsedTime').textContent = hDisplay + mDisplay + sDisplay;
}
setInterval(increment, 1000);
JSFIDDLE
I have updated the JS fiddle http://jsfiddle.net/03L9pcm2/
Here is what I have changed
var hDisplay = h > 0 ? (h < 10 ? "0" + h + ":" : h + ":") : "00:";
var mDisplay = m > 0 ? (m < 10 ? "0" + m + ":" : m + ":") : "00:";
var sDisplay = s > 0 ? (s < 10 ? "0" + s : s) : "00";
You just needed to format the hours, minutes and seconds slightly differently.
I forked your example here:
http://jsfiddle.net/samrae/xb6n5Lda/6/
var timeStamp = Date.now(),
sessionStamp = sessionStorage.getItem('ts'),
elapsedTime;
if (!sessionStamp) {
sessionStorage.setItem('ts', timeStamp.toString());
sessionStamp = timeStamp;
}
else {
sessionStamp = parseInt(sessionStamp);
}
function increment() {
elapsedTime = Date.now() - sessionStamp;
d1= Math.round(elapsedTime / 1000).toString();
d = Number(d1);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
var s = Math.floor(d % 3600 % 60);
var hDisplay = h > 0 ? (h < 10 ? "0" : "") + h + ":" : "00:";
var mDisplay = m > 0 ? (m < 10 ? "0" : "") + m + ":" : "00:";
var sDisplay = s > 0 ? (s < 10 ? "0" : "") + s : "00";
document.getElementById('elapsedTime').textContent = hDisplay + mDisplay + sDisplay;
}
setInterval(increment, 1000);
You're on the right track with checking if the seconds are bigger than 0 but you were printing an empty string if they are as apposed to what you need which is "00".
You could separate out the logic for making the hours, mins and seconds into separate functions so that it's easier to follow
This is my own trick. simple and short and stylish:
var hDisplay = (h < 0 ? "00" : ("0"+h).slice(-2)) + ":";
//And others ...
I've been trying to make a simple javascript code that displays the time, but when I set the array and attach it to the currentDay it appears as 'NaN' can y'all help me out please? =] Here's the code:
function updateTime(){
var currentTime = new Date();
var Wordday = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
var hours = currentTime.getHours()
if ( hours == 0 ) {
hours = "0" ? 12 : hours
};
var minutes = currentTime.getMinutes();
if (minutes < 10){
minutes = "0" + minutes;
};
var seconds = currentTime.getSeconds();
if (seconds < 10){
seconds = "0" + seconds;
};
var day = currentTime.getDay();
var t_str = + Wordday[day] + " " + hours + ":" + minutes + ":" + seconds + " ";
if(hours > 11){
t_str += "AM";
} else {
t_str += "PM";
};
document.getElementById('time_span').innerHTML = t_str;
}
setInterval(updateTime, 1000);
replace
var t_str = + Wordday[day] +....
with
var t_str = Wordday[day] +...
Now it is working fine for me
One problem is at
if (currentTime.getHours() < 12) {
t_str += "AM";
} else {
t_str += "PM";
};
Demo: Fiddle