setInterval() 定时器 - 倒计时

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

 window.setInterval(回调函数, [间隔的毫秒数]);

注意：

1. window 可以省略。

2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。

3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

案例： 倒计时

案例分析

• 这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
• 三个黑色盒子里面分别存放时分秒
• 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
• 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
• 最好采取封装函数的方式， 这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

代码

<style>
    div {
        margin: 200px;
    }

    span {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #333;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 40px;
    }
</style>
<script>
    window.addEventListener('load', function(){
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        // +号 将时间转换为number型，方便计算
        // Date 里的时间一定要写未来的时间
        var inputTime = +new Date('2021-4-28 12:47:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            // 当 times<0 时停止计时
            if (times > 0) {
                var h = parseInt(times / 60 / 60 % 24); //时
                h = h < 10 ? '0' + h : h;
                hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
                var m = parseInt(times / 60 % 60); // 分
                m = m < 10 ? '0' + m : m;
                minute.innerHTML = m;
                var s = parseInt(times % 60); // 当前的秒
                s = s < 10 ? '0' + s : s;
                second.innerHTML = s;
            }
        }
    })
</script>
<div>
    <span class="hour">1</span> :
    <span class="minute">2</span> :
    <span class="second">3</span>
</div>