案例分析：
1、倒计时效果是不断变化的，因此我们需要定时器来自动变化(setInterval)
2、三个黑盒子里面分别存放时、分、秒
3、三个黑盒子利用innerHTML放入计算的小时、分钟、秒数
4、(程序读取需要时间)第一次执行也是间隔毫秒数，因此刷新页面时会有空白
5、最好采用封装函数的方式，这样先调用一次这个函数，防止刚开始刷新页面有空白问题
6、当倒计时结束时，需要延长一个短时间（setTimeout），弹出时间到了的提示框
CSS样式：
<style>* {margin: 0;padding: 0;}div {width: 800px;height: 800px;margin: 0 auto;margin-top: 200px;text-align: center;}.hour,.minute,.second {display: inline-block;width: 50px;height: 50px;background-color: black;color: white;line-height: 40px;padding: 40px;}</style>JS操作:
<body><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('2021-8-19 15:30:00');//定义结束的时间countDown(); //先调用一次防止第一次刷新页面有空白var i = 0;var timer = null; //定义一个全局变量方便清除定时器//2、开启定时器timer = setInterval(countDown, 1000); //每隔一秒调用一次function countDown(time) {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;console.log(111);if (s == '00' && h == '00' && m == '00') {second.innerHTML = '00';clearInterval(timer);setTimeout(function () { //添加一个定时器，使秒出现 00 时 再弹出提示框alert('时间到了');}, 1); //1ms}}</script>
</body>效果如下：
