So I'm trying to make a Javascript clock that can start at a custom time in the format of HH:MM:SS. The code below works fine, the clock ticks up and everything, but starts at the local time, not a custom one. I thought that passing in custom parameters to Date() would work but when I try something like
time = new Date(2011, 0, 1, 12, 33, 24, 567);
It displays just 12:33:24 and doesn't tick up or anything. Is there something I'm missing?
<html>
<head>
<script type="text/javascript">
function clock() {
var mytime = new Date();
var seconds = mytime.getSeconds();
var minutes = mytime.getMinutes();
var hours = mytime.getHours();
var currentTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("Timer").firstChild.nodeValue = currentTime;
}
</script>
</head>
<body>
<span id = "Timer">00:00:00</span>
<script type="text/javascript">
setInterval('clock()', 1000);
</script>
</body>
</html>
So I'm trying to make a Javascript clock that can start at a custom time in the format of HH:MM:SS. The code below works fine, the clock ticks up and everything, but starts at the local time, not a custom one. I thought that passing in custom parameters to Date() would work but when I try something like
time = new Date(2011, 0, 1, 12, 33, 24, 567);
It displays just 12:33:24 and doesn't tick up or anything. Is there something I'm missing?
<html>
<head>
<script type="text/javascript">
function clock() {
var mytime = new Date();
var seconds = mytime.getSeconds();
var minutes = mytime.getMinutes();
var hours = mytime.getHours();
var currentTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("Timer").firstChild.nodeValue = currentTime;
}
</script>
</head>
<body>
<span id = "Timer">00:00:00</span>
<script type="text/javascript">
setInterval('clock()', 1000);
</script>
</body>
</html>
-
1
Remove the single quotes from
'clock()'. – Rahul Desai Commented Feb 10, 2016 at 18:04 - 3 @RahulDesai: ...and the parenthesis. – gen_Eric Commented Feb 10, 2016 at 18:05
-
document.getElementById("Timer").firstChild.nodeValueshould bedocument.getElementById("Timer").innerHTML. – gen_Eric Commented Feb 10, 2016 at 18:06 - 3 I see no one actually understands the question and all the answers think it is related to the timeout... The OP wonders why they set a start time it does not count.... – epascarello Commented Feb 10, 2016 at 18:12
3 Answers
Reset to default 4Consider what you're doing here (syntax changed for simplicity):
setInterval(clock, 1000);
Every second you are running the clock function. So when you have this:
var mytime = new Date();
Every second you will get the current date and time. So it changes every second. But when you have this:
var mytime = new Date(2011, 0, 1, 12, 33, 24, 567);
Every second you get a constant date and time. So it never changes. Thus, it always displays that same constant date and time.
Basically, you should be storing a single Date object and just adding a second to it every second. (Or, more accurately, calculate the difference between the current date, which naturally already had a second added, and the custom date. And update the value based on that difference.) Something more like this (untested, shown for structural changes only):
// store when the clock began ticking
var startDate = new Date();
function clock() {
// create the custom date, and add to it the difference
// between when the clock started ticking and right now
var diff = new Date().getTime() - startDate.getTime();
var mytime = new Date(2011, 0, 1, 12, 33, 24, 567);
mytime.setMilliseconds(mytime.getMilliseconds() + diff);
var seconds = mytime.getSeconds();
var minutes = mytime.getMinutes();
var hours = mytime.getHours();
var currentTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("Timer").firstChild.nodeValue = currentTime;
}
The reason why the example you have ticks up is you are reading a new time on every iteration. When you hard code a time, the time will always be the same. If you want the time to increase, you will need to manually track how much time has elapsed and add that to the time you want to start at.
//get the start time the page loads
var startTime = new Date();
function clock() {
//the time you want to start from
var mytime = new Date(2011, 0, 1, 12, 33, 24, 567);
///calcualte the difference between the start and current time
var diff = new Date() - startTime;
//add that difference to the offset time
mytime.setMilliseconds(mytime.getMilliseconds() + diff);
//Generate your output
var seconds = mytime.getSeconds();
var minutes = mytime.getMinutes();
var hours = mytime.getHours();
var currentTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("Timer").innerHTML = currentTime;
}
setInterval(clock, 1000);
clock();<span id="Timer">x<span>You're close - you want to pass the function by object reference to the setInterval method. When it's in quotes, and has the parentheses like you've got it, it's just treated as a string.
Here's a working fiddle: https://jsfiddle/687ts2zz/
var clock = function() {
var mytime = new Date(),
seconds = mytime.getSeconds(),
minutes = mytime.getMinutes(),
hours = mytime.getHours(),
currentTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("Timer").firstChild.nodeValue = currentTime;
}
setInterval(clock, 1000);
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745368188a4624678.html
评论列表（0条）