Compte à rebours Javascript avec entrée utilisateur

Question

J'essaie de créer un compte à rebours où l'utilisateur peut entrer n'importe quelle combinaison de valeurs de jour, d'heure, de minute et de seconde et faire en sorte que le compte à rebours soit terminé. J'ai l'impression d'avoir tous les morceaux mais après une semaine d'essayer de résoudre ce problème, j'ai besoin d'aide. Je mélange le code autour de tous avec des effets variés. Fondamentalement, j'ai l'impression qu'il me manque un moyen de formater les données d'entrée d'une manière que je peux utiliser pour soustraire de la date actuelle, mais honnêtement, je n'en ai aucune idée. Toute contribution serait utile.

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

Si votre minuterie ne repose pas sur la date, mais sur un nombre donné de jours, heures, minutes et secondes, pourquoi impliquer dates du tout? Que diriez-vous de

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 
    } 
}