Javascript Countdown-Timer mit Benutzereingabe

Question

Ich versuche, einen Countdown-Timer zu erstellen, wo der Benutzer eine beliebige Kombination von Tag, Stunde, Minute und Sekunden eingeben und Countdown bis zur Fertigstellung haben kann. Ich habe das Gefühl, dass ich alle Teile habe, aber nach einer Woche, in der ich versuche, dieses Problem zu lösen, brauche ich Hilfe. Ich mische Code um alle mit unterschiedlichen Effekten. Grundsätzlich habe ich das Gefühl, dass mir die Formatierung der Eingabedaten auf eine Art und Weise entgeht, die ich verwenden kann, um vom aktuellen Datum abzuziehen, aber ehrlich gesagt habe ich keine Ahnung. Jede Eingabe wäre hilfreich.

Javascript:

function start() { 
    var countdownTimer = setInterval('timer()', 1000); 
} 

function timer() { 
    var d = parseInt(document.getElementById("days").value, 0); 
    var h = parseInt(document.getElementById("hours").value, 0); 
    var m = parseInt(document.getElementById("minutes").value, 0); 
    var s = parseInt(document.getElementById("seconds").value, 0); 

    var now = new Date(); 
    var date = now.getTime(); 

    addDay = now.setDate(now.getDate() + d); 
    addHour = now.setHours(now.getHours() + h); 
    addMinute = now.setMinutes(now.getMinutes() + m); 
    addSecond = now.setSeconds(now.getSeconds() + s); 

    var then = new Date(addHour + addMinute + addSecond); 

    if(d > 0 || h > 0 || m > 0 || s > 0){ 
    var final = then - date; 
    var dd = Math.floor(final/ (1000 * 60 * 60 * 24)); 
    var hh = Math.floor((final/(1000 * 60 * 60)) % 24); 
    var mm = Math.floor((final/1000/60) % 60); 
    var ss = Math.floor((final/1000) % 60); 

    document.getElementById("display").innerHTML = "Time Remaining: " + dd + "D  " + hh + "H " + mm + "M " + ss + "S"; 

    document.getElementById("message").innerHTML = then; 

    if (final < 0) { 
     clearInterval(countdownTimer); 
     document.getElementById("message").innerHTML = "Expired"; 
    } 
    }else{ 
    document.getElementById("display").innerHTML = " "; 
    document.getElementById("message").innerHTML = "Countdown Not Started"; 
    } 
} 

HTML:

<div id="countdowntimer"> 
    <button id="Start" onclick="start();">Start Timer</button> 

    D:<input type="text" id="days" value="0" /> 
    H:<input type="text" id="hours" value="0" /> 
    M:<input type="text" id="minutes" value="0" /> 
    S:<input type="text" id="seconds" value="0" /><br> 

    <div id="display"></div> 

    <div id="message"></div> 
</div> 

Answer 1

Wenn Ihr Timer nicht auf Datum, sondern auf einer bestimmten Anzahl von Tagen, Stunden, Minuten und Sekunden basiert, warum beinhalten Daten überhaupt? Wie wäre es mit

function timer(){ 
    var d = parseInt(document.getElementById("days").value, 0); 
    var h = parseInt(document.getElementById("hours").value, 0); 
    var m = parseInt(document.getElementById("minutes").value, 0); 
    var s = parseInt(document.getElementById("seconds").value, 0); 

    var current = ((d * 86400) + (h * 3600) + (m * 60) + s); //the current time left in seconds 
    if (current > 0) { 
     //take one second away, and rerender the seconds split into d, h, m, and s in the html, which you will reuse next time timer() runs 
    } else { 
     //expired 
    } 
}