How to make Javascript time automatically update
Question
I am using the following Javascript code to display the time on my website. How can I make this update automatically.
Thanks
<section class="portlet grid_6 leading">
<header>
<h2>Time<span id="time_span"></span></h2>
</header>
<script type="text/javascript">
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
var t_str = hours + ":" + minutes + " ";
if(hours > 11){
t_str += "PM";
} else {
t_str += "AM";
}
document.getElementById('time_span').innerHTML = t_str;
</script>
</section>
9 answers
solution1
12 2012-05-06 13:23:40
Use setTimeout(..) to call a function after a specific time. In this specific case, it is better to use setInterval(..)
function updateTime(){
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
var t_str = hours + ":" + minutes + " ";
if(hours > 11){
t_str += "PM";
} else {
t_str += "AM";
}
document.getElementById('time_span').innerHTML = t_str;
}
setInterval(updateTime, 1000);
solution2
2 2012-05-06 13:29:07
Add all your javascript code in a function called updateClock() placed in the <head> section of your page, and alter the <body> tag that way:
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
It will recalculate and redisplay the time every second. Since you only display hours and minutes, you can use a longer interval. If you want to update time every numSeconds you should use something like
<body onload="updateClock(); setInterval('updateClock()', numSeconds * 1000 )">
And of course, this one is just one of many gazillions solutions that you can find out there .
solution3
1 2012-05-06 13:25:24
There are plenty of clock libraries out there. Perhaps check out this previous post: How to create a jquery clock timer
solution4
1 2012-05-06 13:28:24
try this, a tidier version:
var el = document.getElementById('time_span')
setInterval(function() {
var currentTime = new Date(),
hours = currentTime.getHours(),
minutes = currentTime.getMinutes(),
ampm = hours > 11 ? 'PM' : 'AM';
hours += hours < 10 ? '0' : '';
minutes += minutes < 10 ? '0' : '';
el.innerHTML = hours + ":" + minutes + " " + ampm;
}, 1000);
solution5
0 2012-05-06 13:45:40
A bit less messy would be:
timer();
function timer(){
var now = new Date,
hours = now.getHours(),
ampm = hours<12 ? ' AM' : ' PM',
minutes = now.getMinutes(),
seconds = now.getSeconds(),
t_str = [hours-12, //otherwise: what's the use of AM/PM?
(minutes < 10 ? "0" + minutes : minutes),
(seconds < 10 ? "0" + seconds : seconds)]
.join(':') + ampm;
document.getElementById('time_span').innerHTML = t_str;
setTimeout(timer,1000);
}
The timer updates (roughly) every second (= 1000 Ms), using setTimeout from within the timer function.
See it in action
solution6
0 2016-11-07 05:05:29
This code output format->00:00:00 and refresh automatically like real time clock, hope it works..
function r(txt) {
document.write(tex);
}
function createTIME() {
d = new Date();
var time = addZERO(d.getHours()) + ':' + addZERO(d.getMinutes()) + ':' + addZERO(d.getSeconds());
return 'Present Time = ' + time;
}
function doDyn() {
document.getElementById('Dyn').innerHTML = createTIME();
}
function addZERO(val) {
return ((val < 10) ? '0' : '') + val;
}
solution7
0 2020-09-06 17:21:35
GetTime(); function GetTime(){ var CurrentTime = new Date() var hour = CurrentTime.getHours() var minute = CurrentTime.getMinutes() var second = CurrentTime.getSeconds() if(minute < 10){ minute = "0" + minute } if(second < 10){ second = "0" + second } var GetCurrentTime = hour + ":" + minute + ":" + second + " "; if(hour > 11){ GetCurrentTime += "pm" }else{ GetCurrentTime += "am" } document.getElementById("CurrentTime").innerHTML = GetCurrentTime; setTimeout(GetTime,1000) }
<span id="CurrentTime"></span>
solution8
0 2021-02-11 10:10:57
GetTime(); function GetTime(){ var CurrentTime = new Date() var hour = CurrentTime.getHours() var minute = CurrentTime.getMinutes() var second = CurrentTime.getSeconds() if(minute < 10){ minute = "0" + minute } if(second < 10){ second = "0" + second } var GetCurrentTime = hour + ":" + minute + ":" + second + " "; if(hour > 11){ GetCurrentTime += "pm" }else{ GetCurrentTime += "am" } <!-- Try changing innerHTML to document.getElementById("CurrentTime").value --> document.getElementById("CurrentTime").value = GetCurrentTime; setTimeout(GetTime,1000) }
<span id="CurrentTime"></span>
solution9
-1 2016-05-28 00:22:58
timer(); function timer(){ var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() var sec = currentTime.getSeconds() if (minutes < 10){ minutes = "0" + minutes } if (sec < 10){ sec = "0" + sec } var t_str = hours + ":" + minutes + ":" + sec + " "; if(hours > 11){ t_str += "PM"; } else { t_str += "AM"; } document.getElementById('time_span').innerHTML = t_str; setTimeout(timer,1000); }
<header> <h2>Time<span id="time_span"></span></h2> </header>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.