2014-09-24 10 views
6

Sto provando a visualizzare il tempo rimanente per i prossimi 5 minuti (scattato ai 5 minuti completi del tempo corrente, ad es. 15:05, 15:10 ..)Tempo rimanente ai prossimi 5 minuti - Javascript

sono stato in grado di ottenere lo stesso per il tempo rimanente per la prossima ora (non minuti):

<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

allora qual è il problema allora? – Shadow

+0

Mi serve per dare il tempo rimanente per i prossimi cinque minuti non per l'ora successiva – mediaroot

risposta

3

qualcosa di simile?

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

Oh mio male, l'ho modificato a 10 poiché ho accelerato la variabile data a scopo di test e ho dimenticato di cambiarlo di nuovo. Grazie mille – Mandera

+0

. Ogni possibilità di ottenere i secondi sincronizzati con il tempo macchina invece di parseInt (60 - parseInt (secondi)); quindi diventa più preciso? – mediaroot

+0

Cosa c'è di sbagliato in questo? Può essere più preciso? – Mandera

1

Questo è ciò che è necessario cambiare per farlo funzionare nel modo che voglio:

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

cambiamento provare per questo:

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

Prova qui: jsFiddle

+0

grande. Ogni possibilità di ottenere i secondi sincronizzati con il tempo macchina invece di parseInt (60 - parseInt (secondi)); quindi diventa più preciso? – mediaroot

+0

JavaScript utilizza l'ora del client con la nuova data(), quindi questo dovrebbe essere accurato. A pensarci bene, non è necessario il parseInt() qui da Date(). GetSeconds() restituisce un int. L'orologio sta spuntando da 60-1 secondi, l'ho aggiornato a 59-0 e dovrebbe apparire più accurato. –

+0

Molte grazie per la spiegazione. Ogni possibilità di forzare il formato a essere sempre MM: SS perché attualmente se il tempo rimanente è 04:01 lo visualizza come 4: 1 – mediaroot

0

Cambia i tuoi minuti rimangono a seguire la linea. Calcola il minuto corrente mod per 5 sottratto da 5, che è quello che ti serve.

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); 

violino Aggiornato http://jsfiddle.net/ov0oo5f7/2/

+0

ottimo. Ogni possibilità di ottenere i secondi sincronizzati con il tempo macchina invece di parseInt (60 - parseInt (secondi)); quindi diventa più preciso? – mediaroot

+0

Il tuo codice diventerà meno dopo i 5 minuti completi – mediaroot

+0

Aggiornato l'errore. Di cosa stavi parlando di secondi, non ti ho preso .. – Vishwanath

0

È possibile lavorare fuori ciò che il prossimo intervallo di 5 minuti sarà se si divide per 5, tondo in su, e moltiplicare per 5 di nuovo.

È necessario gestire se si è in un minuto esatto altrimenti minutes_remain verrà visualizzato come 1 minuto in meno.

In termini di precisione, non è necessario parseInt ovunque poiché sono già tutti i numeri. Ho cercato di renderlo il più efficiente possibile. In ogni caso, lo stai verificando solo una volta al secondo, quindi non puoi garantire la precisione.

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

È possibile ridurre il codice un po 'e per renderlo più preciso, utilizzare setTimeout e chiamare la funzione il più vicino ragionevole a quella successiva secondo pieno. setInterval lentamente andrà alla deriva.

// 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); 
} 

Il numero di zecche sopra riportato sul minuto completo in modo che, ad esempio alle 10:00:00, compaia 5:00. Se si preferisce è mostrata 0:00, poi l'ultima linea di toNext5Min dovrebbe essere:

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

Se siete alla ricerca per il tempo mechine e contando verso il basso per 5 minuti, quindi questo potrebbe aiutare -

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

Un approccio semplice non è altro che 5 minuti sono 5 * 60 * 1000 millisecondi, quindi

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