Question

我正在使用下面的脚本，我想要做的是为脚本设置自定义时间并自动更新，而无需每次都重新设置时间。（我只想设置一次时间并希望我的脚本跟踪时间并显示它）

当我运行脚本时，它会显示：NaN：NaN：NaN AM

我的代码如下：

<div id="js_clock"> display clock here </div>

 <script language="javascript">
    function js_clock(clock_time)
    {   
         var clock_hours = clock_time.getHours();  
         var clock_minutes = clock_time.getMinutes();  
         var clock_seconds = clock_time.getSeconds();  
         var clock_suffix = "AM";     
         if (clock_hours > 11){
         clock_suffix = "PM";
         clock_hours = clock_hours - 12;
         }
         if (clock_hours == 0){
         clock_hours = 12;
         }

         if (clock_hours < 10){
         clock_hours = "0" + clock_hours;
         }

         if (clock_minutes < 10){
         clock_minutes = "0" + clock_minutes;
         }

         if (clock_seconds < 10){
         clock_seconds = "0" + clock_seconds;
         }

         var clock_div = document.getElementById('js_clock');
         clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix;
         setTimeout("js_clock()", 1000);
    }

     var serverTime = new Date("09:20:50");
     js_clock(serverTime);
 </script>

Answer 1

我想你已经忘记了将一个论点传递给js_clock()。也许你应该这样做：

setTimeout(
    function() {
        //Call the function again updating seconds by 1
        js_clock(
            new Date(
                clock_time.getFullYear(), 
                clock_time.getMonth(), 
                clock_time.getDate(), 
                clock_time.getHours(), 
                clock_time.getMinutes(), 
                clock_time.getSeconds() + 1
             )
        );
    }, 
    1000
);

修改：我错过了这一点，只需一个函数调用就可以完成：

setTimeout( function() { js_clock(new Date(+clock_time + 1000)); }, 1000 );

+clock_time语句将Date对象从UNIX Epoch转换为毫秒，因此更新时间就像汇总1000毫秒一样简单。感谢用户RobG; - ）

Answer 2

创建日期时遇到问题，new Date("09:20:50");会返回无效日期。

如果您想设置小时分和秒使用

new Date(year, month, day [, hour, minute, second, millisecond ])

或看看here。

您也忘了将日期传递给setTimeout，请尝试：

setTimeout(function() {
    js_clock(new Date(/*pass hours minutes and seconds here*/))
}, 1000);

Answer 3

WAIT！刚才意识到，这还没有显示出正确的时间。错误消失了，但时间不是你想要的。

window.js_clock = function js_clock(clock_time) {
    var clock_hours = clock_time.getHours();
    var clock_minutes = clock_time.getMinutes();
    var clock_seconds = clock_time.getSeconds();
    var clock_suffix = "AM";
    if (clock_hours > 11) {
        clock_suffix = "PM";
        clock_hours = clock_hours - 12;
    }
    if (clock_hours === 0) {
        clock_hours = 12;
    }

    if (clock_hours < 10) {
        clock_hours = "0" + clock_hours;
    }

    if (clock_minutes < 10) {
        clock_minutes = "0" + clock_minutes;
    }

    if (clock_seconds < 10) {
        clock_seconds = "0" + clock_seconds;
    }

    var clock_div = document.getElementById('js_clock');
    clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix;
    setTimeout("js_clock(new Date())", 1000);
}

var serverTime = new Date("09:20:50");
window.js_clock(serverTime);

Answer 4

您的代码存在一些严重缺陷，例如以下内容。

setTimeout 并没有完全以设定的间隔运行，但是一旦它可以随后运行，所以这个时钟会慢慢漂移，有时会很多。

将字符串传递给Date并期望正确解析它是有问题的。在ECMA-262 ed 3中，它完全取决于实现，在ES5中，字符串必须是ISO8601长格式的自定义版本（但请注意，并非所有使用的浏览器都支持ES5）。

最后，如果客户端忙，该功能可能无法运行几秒钟，因此时钟需要基于客户端时钟，然后调整时间差。

以下功能可以完成上述所有工作。

<script type="text/javascript">
var customClock = (function() {

  var timeDiff;
  var timeout;

  function addZ(n) {
    return (n < 10? '0' : '') + n;
  }

  function formatTime(d) {
    return addZ(d.getHours()) + ':' +
           addZ(d.getMinutes()) + ':' +
           addZ(d.getSeconds());
  }

  return function (s) {

    var now = new Date();
    var then;

    // Set lag to just after next full second
    var lag = 1015 - now.getMilliseconds();

    // Get the time difference if first run
    if (s) {
      s = s.split(':');
      then = new Date(now);
      then.setHours(+s[0], +s[1], +s[2], 0);
      timeDiff = now - then;
    }

    now = new Date(now - timeDiff);

    document.getElementById('clock').innerHTML = formatTime(now); 
    timeout = setTimeout(customClock, lag);
  }
}());


window.onload = function() {
  customClock('09:20:50');
}

</script>

<div id="clock"></div>

基于自定义时间的Javascript时钟

4 个答案: