2014-10-17 78 views
0

有什麼辦法可以將毫秒添加到我的計時器中嗎?向html中的計時器添加毫秒

我目前正在使用這個計時器,但它僅以秒計。

var count=99; 
    var counter=setInterval(timer, 1000); //1000 will run it every 1 second 

    function timer(){ 
     count=count-1; 

     if (count <= 0){ 
     clearInterval(counter); 
     return; 
     } 
     document.getElementById("timer").innerHTML=count + " seconds"; // watch for spelling 
    } 

感謝

+1

你說的 「添加毫秒」 呢? setInterval在觸發你的函數之前需要幾毫秒的時間。 – Shriike 2014-10-17 19:42:25

+0

更改'setInterval(timer,1000);''setInterval(timer,1);'每毫秒運行'timer()' – SuckerForMayhem 2014-10-17 19:43:21

+1

我想在我的計時器上顯示毫秒。 目前顯示爲60秒。我希望它是60:00秒 – User358218 2014-10-17 19:43:27

回答

5

定時器不會精確到毫秒運行 - 不僅是標準JS最小超時下面,計時器事件可以排隊和各種其他問題。無論如何(沒有雙關語意思),你實際上看不到每秒鐘計數1000次的計時器。

只需使用window.requestAnimationFrame,並顯示傳遞給該函數的時間與計時器的參考開始時間之間的差異。

var timer = document.getElementById('timer'); 
 

 
var expires = +new Date() + 10000; 
 

 
(function update() { 
 
    var now = +new Date(); 
 
    var togo = expires - now; 
 
    if (togo > 0) { 
 
    timer.innerHTML = togo; 
 
    window.requestAnimationFrame(update); 
 
    } else { 
 
    timer.innerHTML = 0; 
 
    } 
 
})();
<div id="timer"></div>

+0

嗨Altinak, 我期待做一個簡單的倒數計時器,毫秒 – User358218 2014-10-17 19:49:44

+0

確定 - 代碼更改爲顯示倒計時 - 轉換爲MM:SS.sss留下作爲一個微不足道的練習讀者。 – Alnitak 2014-10-17 19:52:54

+0

如果你不介意回答,'+ new Date()'中的'+'是什麼。它有什麼作用? – 2014-10-17 19:55:38

0

總是遲到了,但這裏有一個我早些時候發表。似乎很遺憾浪費它。

http://jsfiddle.net/dy25nce7/

function countdownTimer(el,duration){ 
    var exp = Date.now() + duration;//expires in now + duration milliseconds 

    //callback using window.requestAnimationFrame if available else setTimeout at 60fps: 
    var rAF = window.requestAnimationFrame || function(callback){window.setTimeout(callback,1000/60);}; 

    //left-pad with leading zeros 
    function pad(n,s){ 
     s = s||2; 
     return ("00000"+n).substr(-s); 
    } 

    //The loopy bit: 
    //note the use of a bitwise right-shift to convert to int (http://jsperf.com/number-vs-parseint-vs-plus/39) 
    (function update() { 
     var n = Date.now(), 
      e = (exp-n), 
      ms= (e%1000), 
      s = ((e/1000)%60) >> 0, 
      m = ((e/(1000*60))%60) >> 0, 
      h = ((e/(1000*60*60))%24) >> 0; 
     if (e > 0) { 
      el.innerHTML = pad(h)+":"+pad(m)+":"+pad(s)+":"+pad(ms,3); 
      rAF(update); 
     } else { 
      el.innerHTML = "00:00:00:000"; 
     } 
    })();//IIFE (Immediately-Invoked Function Expression) 

}; 

countdownTimer(document.getElementById('timer'),10000);