如何用js设计时间倒计时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var endDate = new Date("2019-1-8 12:00:00");
        var end = endDate.getTime();
        //时间差
        var leftTime = end - now;
        //定义变量 d,h,m,s保存倒计时的时间
        var d, h, m, s;
        if (leftTime >= 0) {
            d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
            h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
            m = Math.floor(leftTime / 1000 / 60 % 60);
            s = Math.floor(leftTime / 1000 % 60);
        }
        if (h < 10) {
            h = '0' + h;
        }
        if (m < 10) {
            m = '0' + m;
        }
        if (s < 10) {
            s = '0' + s;
        }
        //将倒计时赋值到div中
        document.getElementById("_d").innerHTML = d + "天";
        document.getElementById("_h").innerHTML = h + "时";
        document.getElementById("_m").innerHTML = m + "分";
        document.getElementById("_s").innerHTML = s + "秒";
        //递归每秒调用countTime方法,显示动态时间效果
        setTimeout(countTime, 1000);

    }
    </script>
</head>

<body onload="countTime()">
    <div>
        <span id="_d">00</span>
        <span id="_h">00</span>
        <span id="_m">00</span>
        <span id="_s">00</span>
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_44440256/article/details/86024659