Javascript Countdown von d: h: m: s

Question

Ich bin neu in Javascript. Mein PHP-Skript gibt einen Wert in diesem Format

d:h:m:s 

Nun würde Ich mag einen Countdown haben, die in jeder Sekunde von diesem Countdown kann.

Ich habe einen Countdown geändert. Dies funktioniert jedes Mal, wenn der Countdown jede Sekunde "tickt", gibt er NaN die ganze Zeit zurück. Irgendeine Idee, was ich falsch mache?

$(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

Soweit ich sehen kann, haben Sie 2 Probleme hier:

1. nach der ersten Ausführung Sie das Muster des Textes, den Sie in der H1-Display ändern. Zuerst haben Sie 02:03:05:59. Dann möchten Sie 02 days 03:05:58 in das Tag schreiben. Das nächste Mal, wenn Sie es analysieren, erhalten Sie den Fehler, weil Sie bei : teilen, und das funktioniert nicht mehr, da Sie days anstelle von : als Trennzeichen für den ersten Teil haben.
2. Bei der Berechnung der Minuten sollten Sie auch die Tage und nicht nur die Stunden subtrahieren.

Wenn Sie wan die dd zu halten: hh: mm: ss-Format, können Sie es wie folgt tun:

$(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

Ihr Snippet geht von dd: hh: mm : ss bis dd Tage, hh Stunden. Zum zweiten Mal enthält Ihr Tag nicht-parsierbaren Text.

Ich habe es zu etwas genauer geändert. Etwas noch genauer wäre es, einen Zeitstempel in Millisekunden in der Zukunft zu geben statt etwas mit Sekunden, da es einige Sekunden dauern wird, um die Seite zu rendern. Wenn du Minuten vom Server weg machst, wäre es wahrscheinlich besser.

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>