js原生倒计时

倒计时是2019年6月7号10点开始的
代码粘贴过去直接运行即可
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>倒计时</title>
</head>

<body>
    <div id="timeBox">

    </div>
</body>
<script>
    // 获取容器
    var timeBox = document.querySelector('#timeBox');
    // 倒计时方法
    /*
       times 为未来的事件 为时间戳
    */
    function countDown(times) {
        // 正常是要校验的自己使用就不校验了，知道怎么传参
        // 获取今天的事件戳
        var today = new Date().getTime();
        // 当前时间已经大于传入的时间，times不属于未来时
        if (today >= times) {
            return {
                countdownHtml: '倒计时已经结束了',
                flag: true
            }
        }
        // 获得剩余的毫秒数
        var timeDiff = times - today;
        //计算剩余的天数
        //  /1000 转化成秒  / 60 转化成分 /60 转化成时 //转化成天  10 是 10进制
        var d = parseInt(timeDiff / 1000 / 60 / 60 / 24, 10);
        // 计算剩余的小时 总小时 除余 剩下的就是小时
        var h = parseInt(timeDiff / 1000 / 60 / 60 % 24, 10);
        // 计算剩余的分钟 总分钟数 除余 60 剩下的就是小时
        var M = parseInt(timeDiff / 1000 / 60 % 60, 10);
        // 计算剩余的秒数 同上的同样的
        var s = parseInt(timeDiff / 1000 % 60, 10);
        var seperator1 = "天";
        var seperator2 = "时";
        var seperator3 = "分";
        var seperator3 = "秒";
        // 小于两位数前边➕0
        d = d < 9 ? "0" + d : d;
        h = h < 9 ? "0" + h : h;
        M = M < 9 ? "0" + M : M;
        s = s < 9 ? "0" + s : s;
        var countdown = d + seperator1 +
            h + seperator2 +
            M + seperator3 +
            s + seperator3
        return {
            countdownHtml: countdown,
            flag: false
        }
    }
    // 创建一个未来时间
    var times = new Date('2019/6/7 10:00').getTime();
    // 获取倒计时返回的对象
    var count = countDown(times);
    // 调用一次函数弥补计时器空缺的一秒
    timeBox.innerHTML = count.countdownHtml;
    // 调用计时器 
    var interval = setInterval(function() {
        // 重新获取倒计时返回的对象
        var count = countDown(times);
        if (count.flag) {
            clearInterval(interval);
        }
        timeBox.innerHTML = count.countdownHtml;
    }, 1000)
</script>

</html>
猜你喜欢
