Question

我想显示一个HTML倒计时，其中import sys print('\n'.join(sys.path))比dateEnd多30天，需要2个日期。日期对象正确传递，但dateStart函数仅显示getCountdown()左侧，而days，minutes和hours不会显示改变：

seconds

这里是渲染后的HTML 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 = "" + days + "" + hours + "" + minutes + "" + seconds + ""; } function pad(n) { return (n < 10 ? '0' : '') + n; } getCountdown(); setInterval(function () { getCountdown(); }, 1000); }标记：

#tiles

更新工作代码供将来参考。感谢@deamentiaemundi：

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

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倒计时

1 个答案: