创建自定义倒计时

时间:2013-07-23 04:09:37

标签: javascript html css countdown

所以我正在创建一个自定义页面打开倒计时,我想知道如何创建JavaScript部分?

这是我的JavaScript

function start() {
    var openDate = new Date(2013, 7, 24);
    setInterval(function () {
        var today = new Date();
        var delta = openDate - today;
        var days = Math.floor(delta / 86400).toString();
        var hours = (Math.floor(delta / 3600) % 24).toString();
        var minutes = (Math.floor(delta / 60) % 60).toString();
        var seconds = (delta % 60).toString();

        $(".seconds#first").text(seconds[0]);

    }, 1000);
}

这样可行,但值已关闭。我不知道该怎么办。如果它有帮助,这也是我的HTML。

<div id="countdown">
    <ul class="days">
        <li id="first">1</li>
        <li id="second">1</li>
        <li id="third">1</li>
    </ul>
    <ul class="hours">
        <li id="first">1</li>
        <li id="second">1</li>
    </ul>
    <ul class="minutes">
        <li id="first">1</li>
        <li id="second">1</li>
    </ul>
    <ul id="last" class="seconds">
        <li id="first">1</li>
        <li id="second">1</li>
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

在JavaScript中减去两个日期值时,返回的值始终以毫秒为单位。这意味着变量delta的值将以毫秒为单位,这就是导致问题的原因,因为其余的代码是在假设返回值以秒为单位的情况下编写的。

要解决此问题,delta值应除以1000(将其转换为秒),并且在计算秒值时也应使用Math.floor函数,因为毫秒到秒的转换可能会导致小数值。

var openDate = new Date(2015, 7, 24);

setInterval(function () {

    var today = new Date();
    var delta = (openDate - today) / 1000; //to convert to seconds
    var days = Math.floor(delta / 86400).toString();
    var hours = (Math.floor(delta / 3600) % 24).toString();
    var minutes = (Math.floor(delta / 60) % 60).toString();
    var seconds = (Math.floor(delta % 60)).toString();

    document.getElementById("first").innerHTML = "Days: " + days + "  Time: " + hours + " : " + minutes + " : " + seconds;

}, 1000);
<div id="first"></div>

JavaScript Date Object - MDN Reference