2014-09-24 81 views
6

我想顯示接下來5分鐘的剩餘時間(捕捉到當前時間的全部5分鐘,例如15:05,15:10 ..)剩餘時間到接下來的5分鐘 - Javascript

我是能夠實現的剩餘下一小時(而不是幾分鐘)的時間相同:

<span class="timer"></span> 
<script> 
function secondPassed() { 
    var cur_date = new Date(); 
    var hour = cur_date.getHours(); 
    var minutes = cur_date.getMinutes(); 
    var seconds = cur_date.getSeconds(); 
    var minutes_remain = parseInt(59 - parseInt(minutes)); 
    var seconds_remain = parseInt(60 - parseInt(seconds)); 

    var timers = document.getElementsByClassName('timer'); 
    for (var i = 0; i < timers.length; i++) { 
     timers[i].innerHTML = minutes_remain+":"+seconds_remain; 
    } 

} 

var countdownTimer = setInterval(secondPassed, 1000); 
</script> 

的jsfiddle:http://jsfiddle.net/ov0oo5f7/

+0

那麼,有什麼問題呢? – Shadow 2014-09-24 11:46:24

+0

我需要它給下一個五分鐘剩下的時間,而不是在下一個小時 – mediaroot 2014-09-24 11:47:04

回答

3

像這樣的事情?

function secondPassed() { 
 
    var cur_date = new Date(); 
 
    var minutes = cur_date.getMinutes(); 
 
    var seconds = cur_date.getSeconds(); 
 
    
 
    var timers = document.getElementsByClassName('timer'); 
 
    for (var i = 0; i < timers.length; i++) { 
 
     timers[i].innerHTML = (4 - minutes % 5) + ":" + (seconds >= 50 ? "0" : "") + (59 - seconds); 
 
    } 
 
    
 
} 
 

 
var countdownTimer = setInterval(secondPassed, 1000);
<span class="timer"></span>

+0

哦,我的不好,我把它改爲10,因爲我加快了日期變量的測試目的,我忘了改回它。謝謝 – Mandera 2014-09-24 11:59:31

+0

太棒了。任何機會獲得與機器時間同步的秒數,而不是parseInt(60 - parseInt(秒));所以它更準確? – mediaroot 2014-09-24 12:03:16

+0

這是什麼問題?你可以說得更詳細點嗎? – Mandera 2014-09-24 12:05:30

1

這是你需要改變,以得到它的工作方式是你想要:

var minutes = cur_date.getMinutes(); 
var seconds = cur_date.getSeconds(); 

嘗試改變這一點:

var minutes_remain = 5 - minutes%5 - 1; 
var seconds_remain = 59 - seconds; 

嘗試一下這裏:​​

+0

好。任何機會獲得與機器時間同步的秒數,而不是parseInt(60 - parseInt(秒));所以它更準確? – mediaroot 2014-09-24 11:59:19

+0

JavaScript使用客戶端時間和新的Date(),所以這應該是準確的。第二個想法是,你不需要這裏的parseInt(),因爲Date()。getSeconds()返回一個int。 時鐘現在從60-1秒滴答,我已經更新到59-0,它應該看起來更準確。 – 2014-09-24 12:19:59

+0

非常感謝您的解釋。因爲目前如果剩餘時間是04:01它顯示爲4:1 – mediaroot 2014-09-24 12:27:25

0

更改分鐘仍有以下行。它會從5中減去5來計算當前的分鐘mod,這是你需要的。

function secondPassed() { 
    var cur_date = new Date(); 
    var hour = cur_date.getHours(); 
    var minutes = cur_date.getMinutes(); 
    var seconds = cur_date.getSeconds(); 
    var minutes_remain = parseInt(5 - parseInt(minutes%5)); 
    var seconds_remain = parseInt(60 - parseInt(seconds)); 

    var timers = document.getElementsByClassName('timer'); 
    for (var i = 0; i < timers.length; i++) { 
     timers[i].innerHTML = minutes_remain+":"+seconds_remain; 
    } 

} 

var countdownTimer = setInterval(secondPassed, 1000); 

更新小提琴http://jsfiddle.net/ov0oo5f7/2/

+0

太棒了。任何機會獲得與機器時間同步的秒數,而不是parseInt(60 - parseInt(秒));所以它更準確? – mediaroot 2014-09-24 12:05:23

+0

完成5分鐘後,您的代碼將變爲負號 – mediaroot 2014-09-24 12:07:10

+0

更新了錯誤。你在說什麼,幾秒鐘,我沒有得到你.. – Vishwanath 2014-09-24 12:11:11

0

你可以計算出,如果你5分,一輪它接下來的5分鐘間隔將是什麼,並通過5再乘以。

你需要處理,如果你在一個確切的分鐘,否則minutes_remain將顯示爲少1分鐘。

就準確而言,您無需到處使用parseInt,因爲它們都是數字。我盡力使其儘可能高效。無論如何,你只是每秒檢查一次,所以你不能保證準確性。

http://jsfiddle.net/ov0oo5f7/6/

function secondPassed() { 
    var cur_date = new Date(); 

    var hour = cur_date.getHours(); 

    // handle 0 seconds - would be 60 otherwise 
    var seconds_remain = 60 - (cur_date.getSeconds() || 60); 

    // handle ceil on 0 seconds - otherwise out by a minute 
    var minutes = cur_date.getMinutes() + (seconds_remain == 0 ? 0 : 1); 
    var minutes_remain = Math.ceil(minutes/5) * 5 - minutes; 

    var timers = document.getElementsByClassName('timer'); 
    for (var i = 0; i < timers.length; i++) { 
     timers[i].innerHTML = minutes_remain+":"+seconds_remain; 
    } 

} 

var countdownTimer = setInterval(secondPassed, 1000); 
3

可以減少代碼了一下,以使其更準確,使用的setTimeout,並呼籲儘可能接近合理下一整秒的功能。 setInterval會慢慢漂移。

// Return the time to next 5 minutes as m:ss 
function toNext5Min() { 

    // Get the current time 
    var secs = (new Date()/1000 | 0) % 300; 

    // Function to add leading zero to single digit numbers 
    function z(n){return (n < 10? '0' : '') + n;} 

    // Return m:ss 
    return (5 - secs/60 | 0) + ':' + z(60 - (secs%60 || 60)); 
} 

// Call the function just after the next full second 
function runTimer() { 
    console.log(toNext5Min()); 
    var now = new Date(); 
    setTimeout(runTimer, 1020 - now % 1000); 
} 

上面在整分鐘上打勾,因此在上午10:00:00它顯示5:00。如果你寧願被顯示0:00,然後toNext5Min的最後一行應該是:

return (5 - (secs? secs/60 : 5) | 0) + ':' + z(60 - (secs%60 || 60)); 
0

如果你正在尋找機TEST時間和計數下來5分鐘,那麼這可能會幫助 -

var startTime = new Date(); 
function secondPassed() { 

    var cur_date = new Date(); 

    if(parseInt((cur_date - startTime)/1000) >300){ 
     window.clearInterval(countdownTimer); 
    } 
    var hour = cur_date.getHours(); 
    var minutes = cur_date.getMinutes(); 
    var seconds = cur_date.getSeconds(); 
    var minutes_remain = parseInt(59 - parseInt(minutes)); 
    var seconds_remain = parseInt(60 - parseInt(seconds)); 

    var timers = document.getElementsByClassName('timer'); 
    for (var i = 0; i < timers.length; i++) { 
     timers[i].innerHTML = minutes_remain+":"+seconds_remain; 
    } 

} 

var countdownTimer = setInterval(secondPassed, 1000); 
0

一個簡單的方法是什麼,5分鐘數5 * 60 * 1000毫秒,從而

var k = 5*60*1000; 
var next5 = new Date(Math.ceil((new Date).getTime()/k)*k);