创建自定义倒计时

Creating a custom countdown

本文关键字：倒计时 自定义 创建      更新时间：2023-09-26

所以我正在创建一个自定义的页面打开倒计时，我想知道如何创建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>

在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日期对象-MDN参考

相关文章：