案例：倒计时功能

① 这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）

② 三个黑色盒子里面分别存放时分秒

③ 三个盒子利用innerHTML放入计算的小时、分钟、秒数

④ 问题：第一次执行也是间隔毫秒数，因此刚刷新页面会有空白

⑤ 解决方法：最好采取封装函数的方式，这样可以先调用用一次这个函数，方式刚开始刷新页面有空白的问题

<div>
    <span class="hour">1</span>
    <span class="minute">2</span>
    <span class="second">3</span>
</div>

<script>
    // 1. 获取元素
    var hour = document.querySelector('.hour');  // 小时的盒子
    var minute = document.querySelector('.minute');  // 分钟的盒子
    var second = document.querySelector('.second');  // 秒数的盒子
    var inputTime = +new Date('2020-5-1 18:00:00');  // 返回的是用户输入时间总的毫秒数
    // 先调用一次这个函数，防止第一次刷新页面会有空白的问题
    countDown();
    // 2. 开启定时器
    setInterval(countDown, 1000);
    function countDown() {
        var nowTime = +new Date();  //返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000;  // times是剩余时间总的秒数
        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>