javascript - 將毫秒添加到計數器

Question

我想知道如何將毫秒添加到我的JS計數器的測驗中。在這一點上，測驗本身只計數並尋找秒（在mysql中是秒數，如：120（2分鐘），並顯示爲02:00）。現在我想增加毫秒。在此先感謝

這裏的腳本：

<script type="text/javascript"> 
var quiz_timer = 0; 

$(window).load(function(){ 
setInterval('run_timer()',1000) 
}) 

function run_timer() 
{ 
quiz_timer++; 

if(quiz_timer > 60) 
{ 
    sec = quiz_timer%60; 
    min = Math.floor(quiz_timer/60); 
} 
else 
{ 
    sec = quiz_timer; 
    min = 0; 
} 

var timer=''; 

if(min < 10) 
timer = '0'; 

timer += min; 

timer += ':'; 

if(sec < 10) 
timer += '0'; 

timer += sec; 


var timer_h = 'Time: '+timer;//+rand(); 
$('#quiz_timer').html(timer_h); 
$('#quiz_time').val(quiz_timer); 
} 

function update_quiz() 
{ 
var cnt_questions = parseInt($('#cnt_questions').val()); 
var cq = parseInt($('#current_question').val()); 
var op = $('#question_'+cq).find('input[type=radio]:checked').length; 

if(op == 0) 
{ 
    alert('You must answer on the question.'); 
    return false; 
} 

if(cq < cnt_questions) 
{ 
    $('#question_'+cq).hide(); 
    $('#question_'+(cq+1)).fadeIn(1000); 
    $('#current_question').val(cq+1); 
    return false; 
} 

$(window).unbind('beforeunload'); 
document.frm_quiz.submit(); 
} 
</script> 

而這裏的功能是輸入mysql中的數據：

function timer($quiz_timer) 
{ 
if($quiz_timer > 60) 
{ 
    $sec = $quiz_timer%60; 
    $min = floor($quiz_timer/60); 
} 
else 
{ 
    $sec = $quiz_timer; 
    $min = 0; 
} 

$timer=''; 

if($min < 10) 
$timer = '0'; 

$timer .= $min; 

$timer .= ':'; 

if($sec < 10) 
$timer .= '0'; 

$timer .= $sec; 

return $timer; 
} 

Answer 1

試試這個：

<script type="text/javascript"> 
    var quiz_timer = 0; 
    var millisecondFactor = 60; //lesser this factor, accurate the timer will work 
    var sec = 0; 
    var min = 0; 
    var hour = 0; 
    $(window).load(function() { 
     setInterval('run_timer()', (1000/millisecondFactor)); 
    }) 

    function run_timer() { 
     quiz_timer++; 
     millisec = quiz_timer; 
     if (millisec > millisecondFactor) { 
      sec++; 
      quiz_timer = 0; 
     } 
     if (sec > 59) { 
      min++; 
      sec = 0; 
     } 
     if (min > 59) { 
      hour++; 
      min = 0; 
     } 
     if (hour > 23) { 
      hour = 0; 
     } 

     var timer = ''; 

     if (min < 10) 
      timer = '0'; 

     timer += min; 

     timer += ':'; 

     if (sec < 10) 
      timer += '0'; 

     timer += sec; 

     timer += ':'; 

     if (millisec < 10) 
      timer += '0'; 

     timer += millisec; 

     var timer_h = 'Time: ' + timer;//+rand(); 
     $('#quiz_timer').html(timer_h); 
     $('#quiz_time').val(quiz_timer); 
    } 

    function update_quiz() { 
     var cnt_questions = parseInt($('#cnt_questions').val()); 
     var cq = parseInt($('#current_question').val()); 
     var op = $('#question_' + cq).find('input[type=radio]:checked').length; 

     if (op == 0) { 
      alert('You must answer on the question.'); 
      return false; 
     } 

     if (cq < cnt_questions) { 
      $('#question_' + cq).hide(); 
      $('#question_' + (cq + 1)).fadeIn(1000); 
      $('#current_question').val(cq + 1); 
      return false; 
     } 

     $(window).unbind('beforeunload'); 
     document.frm_quiz.submit(); 
    } 
</script> 

Answer 2

您當前的方式有很顯著的缺陷：setInterval的時機並不完美。處理時間的更好方法是使用Date對象，獲取開始時間，然後在setInterval中計算經過的時間。

下面是一些示例代碼，應該讓你在正確的軌道上。它只需要你來格式化你怎麼想的時候，你是好去：

/* display the currently elapsed time */ 
function showTime(){ 
    var time = formatTime(Date.now() - startTime); 
    document.getElementById('timer').innerHTML = time; 
} 

/* format the number of miliseconds how you wish them */ 
function formatTime(elapsed) { 
    var hours, minutes, seconds, milis; 

    hours = Math.floor(elapsed/(60*60*1000)); 
    elapsed -= hours * 60 * 60 * 1000; 

    minutes = Math.floor(elapsed/(60*1000)); 
    elapsed += minutes * 60 * 1000; 

    seconds = Math.floor(elapsed/1000); 
    elapsed -= seconds * 1000; 

    milis = elapsed; 

    return 'H' + hours + ' M' + minutes + ' S' + seconds + ' F' + milis; // change this 
} 

/* start counting */ 
var startTime = Date.now(); 
/* runs every 10ms, but it's hardly noticeable */ 
var interval = window.setInterval(showTime, 10); 

/* stop after a while */ 
window.setTimeout(function() { window.clearInterval(interval);}, 3000); 

DEMO：http://jsbin.com/EqoRezE/1/edit

PS：Date.now（）可能無法使用您的特定目標瀏覽器。你可以找到一個替代實現此處 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now