如何使用自定义输入时间创建Javascript时钟? | 如何使用自定义输入时间创建Javascript时钟

本文介绍了如何使用自定义输入时间创建Javascript时钟?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

因此，我正在尝试制作一个可以在自定义时间开始的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时钟?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！