JavaScript 两个日期之间的倒计时

Question

我想显示一个 HTML 倒计时，需要 2 个日期，其中 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>

更新工作代码供将来参考。感谢@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") )

输出现在是控制台，以避免混乱。我添加了一个计数器来实际 count 并在每次调用时递增它。

JavaScript 两个日期之间的倒计时

JavaScript countdown between 2 dates

javascript

date

countdown