在4倍速運行的JavaScript時鐘

可能重複：
Javascript to run the Clock (date and time) 4 times speeder 在4倍速運行的JavaScript時鐘

我試圖做的是開始於一個時間值的時鐘（HH：MM：ss）表示我提供並以4倍速度運行（對於運行實際時間4倍的在線遊戲的服務器時間）。我修改了一個我在網上找到的免費時鐘來做到這一點，但它只適用於每隔一分鐘（嘗試下面的代碼，看看我的意思，如果沒有意義）。

var customClock = (function() { 
    var timeDiff; 
    var timeout; 

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

    function formatTime(d) { 
     t1 = d.getHours(); 
     t2 = d.getMinutes(); 
     t3 = d.getSeconds() * 4; 
     if (t3 > 59) { 
      t3 = t3 - 60; 
      t2 = t2 + 1; 
     } 
     if (t2 > 59) { 
      t2 = t2 - 60; 
      t1 = t1 + 1; 
     } 
     if (t1 > 23) { 
      t1 = 0; 
     } 
     return addZ(t1) + ':' + addZ(t2) + ':' + addZ(t3); 
    } 

    return function (s) { 
     var now = new Date(); 
     var then; 

     var lag = 1015 - now.getMilliseconds(); 

     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('00:00:00'); 
};

任何想法爲什麼會發生這種情況？我對Javascript非常陌生，這絕對是一個小黑客。謝謝

來源

2013-01-21 Chakron

我們不是有一個已經？目前找不到問題 – Bergi

我看了一下，找不到它，但是如果已經回答了鏈接，那就太好了。 – Chakron

var lag = 1015 - now.getMilliseconds();正試圖「在下一個時鐘滴答後再次運行一次smidge（15 ms）」。使此值更小（除以4？），並且此代碼將更頻繁地運行。

接下來，讓它顯示當前時鐘持續時間的4倍。類似的問題：現在的細節乘以4或者內部或外部formatTime（）

來源

2013-01-21 02:14:22 robrich

只有當你減去當前的毫秒數時，它纔會在下一個刻度線之後運行，否則它會遲到和遲些，因爲系統滯後和額外的15ms。 – RobG

我取原始時間，並從當前減去它，然後乘以4，並將其添加到原始時間。我認爲這應該照顧或同步問題。

(function(){ 
    var startTime = new Date(1987,08,13).valueOf() //save the date 13. august 1987 
    , interval = setInterval(function() { 
      var diff = Date.now() - startTime 

      //multiply the diff by 4 and add to original time 
      var time = new Date(startTime + (diff*4)) 

      console.log(time.toLocaleTimeString()) 
     }, 1000) 
}())

如何使用自定義日期（使用Date對象）使用

Date(year, month, day, hours, minutes, seconds, milliseconds)

來源

2013-01-21 02:25:21 VeXii

這可以起作用，但是這讓我更難從自定義時間開始，這很重要。我是否錯過了如何將其整合到原始代碼中？ – Chakron

我會先創建一個Clock構造如下：

function Clock(id) { 
    var clock = this; 
    var timeout; 
    var time; 

    this.hours = 0; 
    this.minutes = 0; 
    this.seconds = 0; 
    this.stop = stop; 
    this.start = start; 

    var element = document.getElementById(id); 

    function stop() { 
     clearTimeout(timeout); 
    } 

    function start() { 
     timeout = setTimeout(tick, 0); 
     time = Date.now(); 
    } 

    function tick() { 
     time += 1000; 
     timeout = setTimeout(tick, time - Date.now()); 
     display(); 
     update(); 
    } 

    function display() { 
     var hours = clock.hours; 
     var minutes = clock.minutes; 
     var seconds = clock.seconds; 

     hours = hours < 10 ? "0" + hours : "" + hours; 
     minutes = minutes < 10 ? "0" + minutes : "" + minutes; 
     seconds = seconds < 10 ? "0" + seconds : "" + seconds; 

     element.innerHTML = hours + ":" + minutes + ":" + seconds; 
    } 

    function update() { 
     var seconds = clock.seconds += 4; 

     if (seconds === 60) { 
      clock.seconds = 0; 
      var minutes = ++clock.minutes; 

      if (minutes === 60) { 
       clock.minutes = 0; 
       var hours = ++clock.hours; 

       if (hours === 24) clock.hours = 0; 
      } 
     } 
    } 
}

然後你可以創建一個時鐘並像這樣啓動它：

var clock = new Clock("clock"); 
clock.start();

這裏有一個演示：http://jsfiddle.net/Nt5XN/

來源

2013-01-21 02:44:58

在4倍速運行的JavaScript時鐘

回答

相關問題