2個日期之間的JavaScript倒數

Question

我想顯示一個需要2個日期的HTML倒計時，其中dateEnd比dateStart多30天。 日期對象被正確地傳遞，但getCountdown()功能只顯示days左側，而minutes，hours和seconds不會改變：

function renderCountdown(dateStart, dateEnd){ 

    console.log(dateStart, dateEnd); 
    // Logs 
    // Sat Dec 19 2015 11:42:04 GMT-0600 (CST) 
    // Mon Jan 18 2016 11:42:04 GMT-0600 (CST) 

    let currentDate = dateStart.getTime(); 
    let targetDate = dateEnd.getTime(); // set the countdown date 
    let days, hours, minutes, seconds; // variables for time units 
    let countdown = document.getElementById("tiles"); // get tag element 
    function getCountdown(){ 
     // find the amount of "seconds" between now and target 
     let secondsLeft = (targetDate - currentDate)/1000; 
     days = pad(parseInt(secondsLeft/86400)); 
     secondsLeft %= 86400; 
     hours = pad(parseInt(secondsLeft/3600)); 
     secondsLeft %= 3600; 
     minutes = pad(parseInt(secondsLeft/60)); 
     seconds = pad(parseInt(secondsLeft % 60)); 
     // format countdown string + set tag value 
     countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; 
    } 
    function pad(n) { 
     return (n < 10 ? '0' : '') + n; 
    } 
    getCountdown(); 
    setInterval(function() { getCountdown(); }, 1000); 
} 

這裏的HTML #tiles標籤後呈現：

<div id="countdown"> 
    <div id="tiles"><span>30</span><span>00</span><span>00</span><span>00</span></div> 
    <ul class="labels"> 
    <li>Days</li> 
    <li>Hours</li> 
    <li>Mins</li> 
    <li>Secs</li> 
    </ul> 
</div> 

UPDATE工作代碼供將來參考。 感謝@deamentiaemundi：

function renderCountdown(dateStart, dateEnd){ 
    let targetDate = dateEnd.getTime(); 
    let days, hours, minutes, seconds; 
    let countdown = document.getElementById("tiles"); 
    let count = 0; 
    let getCountdown = function (c){ 
     let currentDate = new Date().getTime(); 
     let secondsLeft = ((targetDate - currentDate)/1000) - c; 
     days = pad(Math.floor(secondsLeft/86400)); 
     secondsLeft %= 86400; 
     hours = pad(Math.floor(secondsLeft/3600)); 
     secondsLeft %= 3600; 
     minutes = pad(Math.floor(secondsLeft/60)); 
     seconds = pad(Math.floor(secondsLeft % 60)); 
     countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; 
    } 
    function pad(n) { 
     return (n < 10 ? '0' : '') + n; 
    } 
    getCountdown(count++); 
    setInterval(function() { getCountdown(count++); }, 1000); 
    } 

Answer 1

一個小提示：

function renderCountdown(dateStart, dateEnd){ 

    console.log(dateStart, dateEnd); 
    // Logs 
    // Sat Dec 19 2015 11:42:04 GMT-0600 (CST) 
    // Mon Jan 18 2016 11:42:04 GMT-0600 (CST) 

    let currentDate = dateStart.getTime(); 
    let targetDate = dateEnd.getTime(); // set the countdown date 
    let days, hours, minutes, seconds; // variables for time units 
    let countdown = document.getElementById("tiles"); // get tag element 
    let count = 0; 
    var getCountdown = function (c){ 
     // find the amount of "seconds" between now and target 
     let secondsLeft = ((targetDate - currentDate)/1000) - c; 
     days = pad(Math.floor(secondsLeft/86400)); 
     secondsLeft %= 86400; 
     hours = pad(Math.floor(secondsLeft/3600)); 
     secondsLeft %= 3600; 
     minutes = pad(Math.floor(secondsLeft/60)); 
     seconds = pad(Math.floor(secondsLeft % 60)); 
     // format countdown string + set tag value 
     console.log(days + ", " + hours + ", " + minutes + ", " + seconds); 
    } 
    function pad(n) { 
     return (n < 10 ? '0' : '') + n; 
    } 
    getCountdown(); 
    setInterval(function() { getCountdown(count++); }, 1000); 
} 

renderCountdown(new Date("Sat Dec 19 2015 11:42:04"),new Date("Mon Jan 18 2016 11:42:04")) 

輸出爲控制檯現在，以避免雜亂。我添加了一個計數器實際上計數下來，並增加每一個電話。