javascript обратный отсчет от d: h: m: s

Question

Я новичок в javascript. Мой PHP скрипт возвращает значение в этом формате

d:h:m:s 

Теперь я хотел бы иметь обратный отсчет времени, который способен отсчитывающий каждый второй из этого.

Я изменил обратный отсчет. Это работает один раз, после обратного отсчета «тикает» каждую секунду он возвращает NaN все время. Любая идея, что я делаю неправильно?

$(document).ready(function() { 
    setInterval(function() { 
    $('.countdown').each(function() { 
     var time = $(this).data("time").split(':'); 
     var timestamp = time[0] * 86400 + time[1] * 3600 + time[2] * 60 + time[3] * 1; 
     var days = Math.floor(timestamp/86400); 
     console.log(time,timestamp); 
     var hours = Math.floor((timestamp - days * 86400)/3600); 
     var minutes = Math.floor((timestamp - hours * 3600)/60); 
     var seconds = timestamp - ((days * 86400) + (hours * 3600) + (minutes * 60))-1; 
     $(this).data("time",""+days+":"+hours+":"+minutes+":"+seconds); 
     if (hours < 10) { 
     hours = '0' + hours; 
     } 
     if (minutes < 10) { 
     minutes = '0' + minutes; 
     } 
     if (seconds < 10) { 
     seconds = '0' + seconds; 
     } 

     $(this).text(days + ':' + hours + ':' + minutes + ':' + seconds); 

    }); 
    }, 1000); 
}) 
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<h1 class="countdown">02:03:05:59</h1> 

Answer 1

Насколько я могу видеть, у вас есть 2 проблемы здесь:

1. после первого исполнения вы изменить шаблон текста отображается в ее h1. Сначала у вас есть 02:03:05:59. Затем вы хотите написать 02 days 03:05:58 в тег. В следующий раз, когда вы разобрали его, вы получите сообщение об ошибке, потому что вы разделитесь на :, и это не работает больше, так как у вас есть days вместо : в качестве разделителя для первой части.
2. При расчете минут вы также должны вычитать дни, а не часы.

Когда вы тусклый сохранить дд: чч: мм: сс, вы можете сделать это следующим образом:

$(document).ready(function() { 
 
    setInterval(function() { 
 
    $('.countdown').each(function() { 
 
     var time = $(this).text().split(':'); 
 
     var timestamp = time[0] * 86400 + time[1] * 3600 + time[2] * 60 + time[3] * 1; 
 
     timestamp -= timestamp > 0; 
 
     var days = Math.floor(timestamp/86400); 
 
     console.log(days); 
 
     var hours = Math.floor((timestamp - days * 86400)/3600); 
 
     var minutes = Math.floor((timestamp - days * 86400 - hours * 3600)/60); 
 
     var seconds = timestamp - days * 86400 - hours * 3600 - minutes * 60; 
 
     if (days < 10) { 
 
     days = '0' + days; 
 
     } 
 
     if (hours < 10) { 
 
     hours = '0' + hours; 
 
     } 
 
     if (minutes < 10) { 
 
     minutes = '0' + minutes; 
 
     } 
 
     if (seconds < 10) { 
 
     seconds = '0' + seconds; 
 
     } 
 

 
     $(this).text(days + ':' + hours + ':' + minutes + ':' + seconds); 
 

 
    }); 
 
    }, 1000); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1 class="countdown">02:03:05:59</h1>

Answer 2

Ваш фрагмент переходит от дд: чч: мм : ss to dd days, hh hours. Итак, во второй раз ваш тэг содержит непонятный текст.

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

var aDay = 24*60*60*1000, anHour = 60*60*1000, aMin = 60*1000, aSec = 1000; 
 
$(document).ready(function() { 
 
    $('.countdown').each(function() { 
 
    var time = $(this).data("time").split(':'); 
 
    var date = new Date(); 
 
    date.setDate(date.getDate()+parseInt(time[0],10)) 
 
    date.setHours(date.getHours()+parseInt(time[1],10),date.getMinutes()+parseInt(time[2],10),date.getSeconds()+parseInt(time[3],10),0) 
 
    $(this).data("when",date.getTime()); 
 
    }); 
 
    setInterval(function() { 
 
    $('.countdown').each(function() { 
 
     var diff = new Date(+$(this).data("when"))-new Date().getTime(); 
 
     var seconds, minutes, hours, days, x = diff/1000; 
 
     seconds = Math.floor(x%60); x=(x/60|0); minutes = x % 60; x= (x/60|0); hours = x % 24; x=(x/24|0); days = x; 
 
     $(this).text(
 
     days + ' day' +(days==1?", ":"s, ") + 
 
     hours + ' hour' +(hours==1?", ":"s, ") + 
 
     minutes + ' minute'+(minutes==1?", ":"s, ") + 
 
     seconds + ' second'+(seconds==1?".":"s.") 
 
    ); 
 
    }); 
 
    }, 500); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1 class="countdown" data-time="02:03:05:59"></h1>