When I load this in a browser it'll show the time it was when page was fully loaded, but won't update itself every second. How do I do this?
var h = date.getHours(); if(h<10) h = "0"+h;
var m = date.getMinutes(); if(m<10) m = "0"+m;
var s = date.getSeconds(); if(s<10) s = "0"+s;
document.write(h + " : " + m + " : " + s);
Use setInterval:
setInterval(clock, 1000);
function clock() {
var date = new Date();
var h = date.getHours(); if(h<10) h = "0"+h;
var m = date.getMinutes(); if(m<10) m = "0"+m;
var s = date.getSeconds(); if(s<10) s = "0"+s;
document.write(h + " : " + m + " : " + s);
}
Although you probably want to update a HTML element rather than document.write to the page every second.
http://jsfiddle.net/bQNwJ/
Wrap it up in a function and let it call itself:
everysecond=1000; // milliseconds
function showCurrentTime(){
/*do your timing stuff here */
if(someConditionIsntMet) setTimeout(showCurrentTime, everysecond)
}
Related
I have a basic script to display PST time based on 24:00hr UTC clock. Everything is working fine except it only displays 0:00:00 (h:m:s) for hours 0-9am and I want to have an extra 0 as a prefix (ex: 00:00:00).
My script is:
function startTime() {
const today = new Date();
let h = today.getUTCHours()-8;
let m = today.getUTCMinutes();
let s = today.getUTCSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
I tried adding the following with no such luck:
function checkTime(h) {
if (h < 10) {h = "0" + h}; // add zero in front of numbers < 10
return h;
}
Note that the en-GB locale displays half-past midnight as 00:30:00, but the en-US locale displays it as 24:30:00.
const today = new Date();
const time = today.toLocaleTimeString('en-GB',
{timeZone: 'America/Los_Angeles', hour12: false})
console.log(time)
Maybe you forgot to call h = checkTime(h);
function startTime() {
const today = new Date();
let h = today.getUTCHours()-8;
let m = today.getUTCMinutes();
let s = today.getUTCSeconds();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
function checkTime(h) {
if (h < 10) {h = "0" + h}; // add zero in front of numbers < 10
return h;
}
startTime();
<div id="txt"></div>
/* Navbar ClockDate */
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
I use this code for my clock in my live chat, but why does it return the wrong time? Specifically 4 hours earlier.
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);
How do I make my clock auto refresh, because it only shows the time the page was loaded?
(function time () {
document.write(new Date().toString("hh:mm:ss tt"));
})();
You could use window.setTimeout or window.setInterval. You have to update the time every seconds (1000 ms).
setTimeout
(function time () {
document.getElementById("time").innerHTML = new Date().toString("hh:mm:ss tt");
var timeout = setTimeout(time, 1000); // recalls the function after 1000 ms
})();
<div id="time"></div>
setInterval
function time () {
document.getElementById("time").innerHTML = new Date().toString("hh:mm:ss tt");
}
var timeInterval = setInterval(time, 1000); // recalls the function every 1000 ms
<div id="time"></div>
You should use setInterval. This will call your function every 1000ms
function time() {
console.log(new Date().toString("hh:mm:ss tt"));
};
setInterval(time, 1000);
This approach requires, say, <div id="txt"></div> in your html template:
var timer = document.getElementById('timer');
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var ampm = h >= 12 ? 'PM' : 'AM';
h = h % 12;
h = h ? h : 12; // the hour '0' should be '12'
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s + " " + ampm;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
<body onload="startTime()">
See also How to format a javascript Date.
And here is the demo.
I am using following code to display date on my webpage. I need to update it every minute. How to do that?
var d=new Date();
var n=d.toString();
document.write(n);
Currently its static, means when the page load, datetime of that moment is displayed. I have to update time every minutes without refreshing the page.
Try with setInterval(): http://jsfiddle.net/4vQ8C/
var nIntervId; //<----make a global var in you want to stop the timer
//-----with clearInterval(nIntervId);
function updateTime() {
nIntervId = setInterval(flashTime, 1000*60); //<---prints the time
} //----after every minute
function flashTime() {
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
var time = h + ' : ' + m + ' : ' + s;
$('#my_box1').html(time); //<----updates the time in the $('#my_box1') [needs jQuery]
}
$(function() {
updateTime();
});
You can use document.getElementById("my_box1").innerHTML=time; instead of $('#my_box1')
from MDN:
About setInterval : --->Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function.
About setTimeout : ----> Calls a function or executes a code snippet after specified delay.
Here is how you can print date time every second
function displayDate()
{
var n=BuildDateString();
document.write(n);
window.setTimeout("displayDate();", 1000); // to print it every minute take 1000*60
}
function BuildDateString()
{
var today = new Date()
var year = today.getYear()
if (year < 2000)
year = "19" + year
var _day = today.getDate()
if (_day < 10)
_day = "0" + _day
var _month = today.getMonth() + 1
if (_month < 10)
_month = "0" + _month
var hours = today.getHours()
var minutes = today.getMinutes()
var seconds = today.getSeconds()
var dn = "AM"
if (hours > 12)
{
dn = "PM"
hours = hours - 12
}
if (hours == 0)
hours = 12
if (minutes < 10)
minutes = "0" + minutes
if (seconds < 10)
seconds = "0" + seconds
var DateString = _month+"/"+_day+"/"+year+" "+hours+":"+minutes+":"+seconds+" "+dn
return DateString;
}
I am using following approach:
var myVar=setInterval(function(){myDateTimer()},60000);
function makeArray()
{
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
function myDateTimer()
{
var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
var hours = date.getHours();
var minutes = date.getMinutes();
var finaldate = days[ date.getDay() ] + ", " + months[month] + " " + day + ", " + year + " " + hours +" : " + minutes;
document.getElementById("showDateTime").innerHTML=finaldate;
}
just do this
$(function(){
setInterval(function(){
var d=new Date();
var n=d.toString();
$('#test').html(n);
},1000);
});
demo http://runjs.cn/code/txlexzuc