如何创建具有自定义输入时间的 Javascript 时钟

How to create a Javascript clock with custom input time?

本文关键字：输入 自定义 时间 时钟 Javascript 何创建 创建      更新时间：2023-09-26

所以我正在尝试制作一个可以在自定义时间以 HH：MM：SS 格式启动的 Javascript 时钟。下面的代码工作正常，时钟滴答作响，一切，但从当地时间开始，而不是自定义时间。我认为将自定义参数传递给 Date（） 会起作用，但是当我尝试类似的东西时

time = new Date(2011, 0, 1, 12, 33, 24, 567);

它只显示 12：33：24，并且没有滴答作响或任何东西。我错过了什么吗？

<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>

考虑一下你在这里做什么（为简单起见，语法已更改）：

setInterval(clock, 1000);

您每一秒都在运行clock函数。 所以当你有这个：

var mytime = new Date();

每一秒你都会得到当前的日期和时间。 所以它每一秒都在变化。 但是当你有这个：

var mytime = new Date(2011, 0, 1, 12, 33, 24, 567);

每一秒你都会得到一个恒定的日期和时间。 所以它永远不会改变。 因此，它始终显示相同的恒定日期和时间。

基本上，您应该存储单个Date对象，并且每秒只向其添加一秒钟。 （或者，更准确地说，计算当前日期（自然已经添加了第二个日期）与自定义日期之间的差异。 并根据该差异更新值。 更像这样的东西（未经测试，仅针对结构更改显示）：

// 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;
}

你拥有的例子之所以滴答作响，是因为你在每次迭代中都在阅读一个新的时间。当您对时间进行硬编码时，时间将始终相同。如果您希望增加时间，则需要手动跟踪经过的时间，并将其添加到要开始的时间。

//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>

你很接近 - 你想通过对象引用将函数传递给 setInterval 方法。当它用引号引起来，并且有括号，就像你得到它一样，它只是被视为一个字符串。

这是一个工作小提琴：https://jsfiddle.net/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);
相关文章：