Question

所以我正在尝试制作一个可以在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>

Answer 1

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

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;

}

Answer 2

你有一个例子的原因是你在每次迭代时都在读新的时间。当您硬编码时间时，时间将始终相同。如果您想要增加时间，则需要手动跟踪已经过了多长时间，并将其添加到您想要开始的时间。

＆＃13;

//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();

＆＃13;

<span id="Timer">x<span>

＆＃13;

Answer 3

您已关闭 - 您希望通过对象引用将该函数传递给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);

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

3 个答案: