javascript — таймер обратного отсчета Javasacript в днях, часах, минутах, секундах

Question

javascript — таймер обратного отсчета Javasacript в днях, часах, минутах, секундах

Я пытаюсь создать отсчет времени на основе времени. Это не основано на current_dates. Начальное время, которое будет извлечено, будет из отдельного файла php. Это будет для браузерной игры. Когда кто-то нажимает кнопку, чтобы запустить этот скрипт. он проверит, выполнены ли определенные требования, и если да, то этот сценарий будет запущен. Основываясь на уровне объекта, он установит начальный таймер для этого уровня. Надеюсь, что это имеет смысл. Во всяком случае, я основал скрипт таймера на основе первого кода, который я предоставляю.

Этот скрипт учитывает только минуты и секунды. Я изменил его, чтобы включить дни и часы. Где-то в процессе я запутался, и сценарий даже не работает вообще. Я также не совсем уверен, что это будет лучший способ для расчета этого. Итак, если у вас есть более чистый метод, пожалуйста, поделитесь. Заранее спасибо.

Этот скрипт основан на скрипте минут / секунд, который я видел. Вот оригинальный источник:

<span id="countdown" class="timer"></span>
<script>
var seconds = 60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Buzz Buzz";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>

Вот модифицированный скрипт, который я пытаюсь включить дни, часы, минуты и секунды.

<span id="countdown"></span>
<script>
var current_level = 93578;

function timer() {

var days = Math.round(current_level/86400);
var remainingDays = Math.round(current_level - (days * 86400));

if (days <= 0){
days = current_level;
}

var hours = Math.round(remainingDays/3600);
var remainingHours = Math.round(remainingDays - (hours * 3600));

if (hours >= 24){
hours = 23;
}

var minutes = Math.round(remainingHours/60);
var remainingMinutes = Math.round(remainingHours - (minutes * 60));

if (minutes >= 60) {
minutes = 59;
}

var seconds = Math.round(remainingMinutes/60);

document.getElementById('countdown').innerHTML = days + ":" + hours ":" + minutes + ":" + seconds;

if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>

9

countdowntimer javascript php timer

Решение

Accepted Answer

Я наконец вернулся к рассмотрению этого и переписал код, и это работает как шарм.

var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
var days        = Math.floor(seconds/24/60/60);
var hoursLeft   = Math.floor((seconds) - (days*86400));
var hours       = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes     = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);

<span id="countdown" class="timer"></span>

20

Другие решения

Вы можете использовать эту JS для эффективного управления таймером.

http://countdownjs.org/

3

Лично я бы использовал интеграцию таймера обратного отсчета jquery. Это просто и имеет ряд опций для отображения в разных форматах. Так как я довольно новичок в JS, это был самый простой способ найти счетчик / таймер.

http://keith-wood.name/countdown.html

1

<span id="date_regist"></span>
<script type="text/javascript">
<script src="http://rc.sefunsoed.org/assets/js/countdown/jquery.countdown.min.js"></script>
var s = '2017/03/01 15:21:21';
f = '2017/03/01 15:22:00';
format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>';jQuery('#date_regist').countdown(s)
.on('update.countdown', function(event) {

jQuery(this).html("<b>will be open </b>" + event.strftime(format));
})
.on('finish.countdown', function(event) {
jQuery("#date_regist").remove()
jQuery("body").append('<span id="date_regist"></span>')
jQuery("#date_regist").countdown(f)
.on('update.countdown', function(event) {

jQuery(this).html("<b> is open for </b>" + event.strftime(format));
})
.on('finish.countdown', function(event) {
jQuery('#rework').hide();
//jQuery(this).html("<b> is closed.</b>");
});
});
</script>

0

Вот мой отработанный и проверенный пример, основанный на вашем коде

<span id="countdown"></span>
<script>
var current_level = 3002;

function timer() {

var days = Math.floor(current_level/86400);
var remainingDays = current_level - (days * 86400);

//if (days <= 0){
//    days = current_level;
//}

var hours = Math.floor(remainingDays/3600);
var remainingHours = remainingDays - (hours * 3600);

//if (hours >= 24){
//     hours = 23;
//}

var minutes = Math.floor(remainingHours/60);
var remainingMinutes = remainingHours - (minutes * 60);

//if (minutes >= 60) {
//     minutes = 59;
//}

var seconds = remainingMinutes;

document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds;

//if (seconds == 0) {
//    clearInterval(countdownTimer);
//     document.getElementById('countdown').innerHTML = "Completed";
//}

current_level--;
}
var countdownTimer = setInterval(timer, 1000);
</script>

0

Источник