2014-09-24 2 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

+0

Мне нужно, чтобы дать оставшееся время в течение следующих пяти минут не на следующий час – mediaroot

ответ

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

+0

отлично. Любая возможность синхронизировать секунды с машинным временем вместо parseInt (60 - parseInt (секунды)); поэтому он становится более точным? – mediaroot

+0

Что не так с этим? Можете быть более конкретными? – Mandera

1

Это то, что вам нужно изменить, чтобы заставить его работать так, как вы хочу:

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

изменение попробовать его на это:

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

Попробуйте здесь: jsFiddle

+0

отлично. Любая возможность синхронизировать секунды с машинным временем вместо parseInt (60 - parseInt (секунды)); поэтому он становится более точным? – mediaroot

+0

JavaScript использует время клиентов с новой Date(), поэтому это должно быть точным. С другой стороны, вам не нужен parseInt() здесь, поскольку Date(). GetSeconds() возвращает int. Часы теперь тикают с 60-1 секунд, я обновил его до 59-0, и он должен выглядеть точнее. –

+0

Большое спасибо за объяснение. Любой шанс заставить формат быть всегда MM: SS, потому что в настоящее время, если оставшееся время 04:01, оно отображает его как 4: 1 – mediaroot

0

Меняйте минут остаются следующие строки. Он вычисляет текущий минутный мод на 5, вычитаемый из 5, что вам и нужно.

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

+0

Ваш код будет минус после завершения 5 минут – mediaroot

+0

Обновлена ​​ошибка. Что ты говорил за секунды, я не получил у .. – Vishwanath

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

Если вы ищете время mechine и подсчет его в течение 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); 
Смежные вопросы