在javascript中創建一個向上計時器

Question

我想製作一個簡單的計時器，它可以在javascript中進行計數。當我的AJAX運行成功，它應該啓動，其結果應該是這樣的

1 sec ago 
2 sec ago 
. 
. 
1 min ago (for 60 sec) 
2 min ago (for 60 sec) 
... and so on 

我google搜索，我無法找到任何這樣的計時器。有什麼建議麼？

Answer 1

您可以通過檢查計數器（用於保持秒數的秒數）是否低於60來實現。如果它超過60，那麼只需將它除以60即可將float值更改爲int以獲得分鐘。 提示：如果你需要精確高達XX分鐘秒可以使用toFixed(2)功能，而不是parseInt

這裏的解決方案

var elem = $('span'); 
 
var count = 0; 
 
setInterval(function() { 
 
    if (count > 60) { // We check if the timer is in seconds or mins 
 
    var time = ++count; // We get a copy of the time in 'seconds' 
 
    time = parseInt(time/60); // We convert it to mins 
 
    $(elem).text(time + 'm'); 
 
    } else { // Simmilarly we can also add a condition to check hours with s=3600 
 
    $(elem).text(++count + 's'); 
 
    } 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <span>0</span> ago... 
 
</p>

Answer 2

嘗試用下面的代碼。如果有幫助，請提供答案。

var counter = 0; 
 
var _minute = 60; 
 
var _hour = 3600; 
 

 
setInterval(function(){ 
 
\t \t counter++; 
 
    
 
\t \t if(counter > (_minute-1) && counter < (_hour-1)){ 
 
    \t \t $('div#show-count').html(Math.floor(counter/_minute) + ' minute ago'); 
 
    }else if(counter > _hour){ 
 
    \t \t $('div#show-count').html(Math.floor(counter/_hour) + ' hour ago'); 
 
    }else{ 
 
    \t \t $('div#show-count').html(counter + ' sec ago'); 
 
    } 
 
    
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="show-count"></div>

Answer 3

請參見下面的代碼，它應該是足夠的靈活性，以實現到你的代碼。

// save the current time on load to use for compairing. 
 
var savedTime = new Date(); 
 
// save the timers object into a variable for speed when referencing 
 
var timer = $('#timer'); 
 
// declare timer var 
 
var timerInterval; 
 

 
function startTimer() { 
 
    // save the timer into a variable called timerInterval so we can stop it later 
 
    timerInterval = setInterval(function() { 
 

 
    // save the time difference into a var for reference 
 
    var time = time_diff(savedTime); 
 

 
    // set the spans text to the timer text. 
 
    timer.text(time); 
 

 
    // call to function after 30 seconds to stop timer 
 
    if (parseInt(time) == 30) stopTimer(); 
 

 
    }, 1000); // 1000 = 1 second, 2000 = 2 seconds etc ...; 
 
} 
 

 
// function to stop timer if needed 
 
function stopTimer() { 
 
    clearInterval(timerInterval); 
 
} 
 

 
// function to work out the difference in time by milliseconds. 
 
function time_diff(time) { 
 
    var diff = new Date() - time; 
 
    var msec = diff; 
 
    var hh = Math.floor(msec/1000/60/60); 
 
    msec -= hh * 1000 * 60 * 60; 
 
    var mm = Math.floor(msec/1000/60); 
 
    msec -= mm * 1000 * 60; 
 
    var ss = Math.floor(msec/1000); 
 
    msec -= ss * 1000; 
 
    if (hh > 0) { 
 
    var uom = (hh == 1) ? "hour" : "hours"; 
 
    return hh + " " + uom; 
 
    } 
 
    if (hh < 1 && mm > 0) { 
 
    var uom = (mm == 1) ? "minute" : "minutess"; 
 
    return mm + " " + uom; 
 
    } 
 
    if (hh < 1 && mm < 1) { 
 
    var uom = (ss == 1) ? "second" : "seconds"; 
 
    return ss + " " + uom; 
 
    } 
 
} 
 

 

 
// click event to stop timer. 
 
$(document).on('click','#stopTimer',function(e){ 
 
    stopTimer(); 
 
}); 
 

 
$(document).on('click','#startTimer',function(e){ 
 
    startTimer(); 
 
}); 
 

 
$(document).on('click','#resetTimer',function(e){ 
 
    savedTime = new Date(); 
 
    timer.text('0 seconds'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Timer : <span id="timer">0 seconds</span></p> 
 
<p><button id="startTimer">Start Timer</button><button id="stopTimer">Stop Timer</button><button id="resetTimer">Reset Timer</button></p>