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

日付の作成に問題があり、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 に答える
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 エポックからのミリ秒に変換するため、時刻の更新は 1000 ミリ秒の合計と同じくらい簡単です。ユーザーRobGに感謝します;-)

于 2012-08-05T23:29:10.780 に答える
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 に答える
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 に答える