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

Question

所以我正在尝试制作一个Javascript时钟，它可以在HH：MM：SS格式的自定义时间开始。 下面的代码工作正常，时钟滴答和一切，但是从当地时间开始，而不是自定义时间。 我认为将自定义参数传递给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对象，并且每秒只添加一个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

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

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

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 个解决方案

解决方案1
4 已采纳 2016-02-10 18:12:51

解决方案2
2 2016-02-10 18:23:14

解决方案3
-2 2016-02-10 18:11:35

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

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-02-10 18:12:51

解决方案2 2 2016-02-10 18:23:14

解决方案3 -2 2016-02-10 18:11:35

解决方案1
4 已采纳 2016-02-10 18:12:51

解决方案2
2 2016-02-10 18:23:14

解决方案3
-2 2016-02-10 18:11:35