Menu
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>
255
asked Feb 17 '26 07:02
Consider 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
