0

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

当我运行脚本时，它显示： 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>
4

4 回答 4

2

我认为您忘记将参数传递给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 ;-)

于 2012-08-05T23:29:10.780 回答
2

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

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

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

或者看看这里。

另外您忘记将日期传递给 setTimeout，请尝试：

setTimeout(function() {
    js_clock(new Date(/*pass hours minutes and seconds here*/))
}, 1000);
于 2012-08-05T23:33:27.993 回答
0

等待！刚刚意识到，这仍然没有显示正确的时间。错误消失了，但时间不是你要找的。

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);​
于 2012-08-05T23:34:11.033 回答
0

您的代码有一些严重的缺陷，例如以下。

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>
于 2012-08-06T01:35:27.297 回答