如何使用自定义输入时间创建Javascript时钟? [英] How to create a Javascript clock with custom input time?
问题描述
因此，我正在尝试制作一个可以在自定义时间开始的HH:MM:SS格式的Javascript时钟.下面的代码可以正常工作，时钟可以计时，并且一切正常，但是从本地时间开始，而不是自定义时间.我以为将自定义参数传递给Date()会起作用，但是当我尝试类似
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);
它仅显示12:33:24，并且没有滴答声或其他任何内容.有什么我想念的吗?
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>
推荐答案
考虑一下您在做什么(为简单起见更改了语法):
Consider what you're doing here (syntax changed for simplicity):
setInterval(clock, 1000);
您每秒都在运行 clock 函数.因此，当您拥有此功能时:
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.
基本上，您应该存储单个 Date 对象，并每秒添加一秒钟.(或者，更准确地说，计算当前日期(自然已经添加了第二个日期)与自定义日期之间的差.并根据该差更新值.)类似这样的东西(未经测试，仅针对结构更改而显示):
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;
}
这篇关于如何使用自定义输入时间创建Javascript时钟?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
