<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> span{ background-color: black; color: aliceblue; font-size: 50px; } </style> </head> <body> <div> <span class="shi">1</span> <span class="fen">2</span> <span class="miao">3</span> </div> <script> var shi = document.getElementsByClassName('shi')[0];// 小时的盒子 var fen = document.getElementsByClassName('fen')[0];// 分钟的盒子 var miao = document.getElementsByClassName('miao')[0];// 秒数的盒子 var inputTime = new Date('2022-8-15 23:59:00');// 返回的是用户输入时间总的毫秒数 countDown();// 我们先调用一次这个函数，防止第一次刷新页面有空白 // 开启定时器 setInterval(countDown, 1000); function countDown() { var nowTime = new Date();// 返回的是当前时间总的毫秒数 var times = (inputTime - nowTime) / 1000; var h = parseInt(times / 60 / 60 % 24); //时 h = h < 10 ? '0' + h : h; shi.innerHTML = h + '时'; var m = parseInt(times / 60 % 60); //分 m = m < 10 ? '0' + m : m; fen.innerHTML = m + '分'; var s = parseInt(times % 60); //分 s = s < 10 ? '0' + s : s; miao.innerHTML = s + '秒'; } </script> </body> </html>
首先我们要知道这个倒计时是不断变化的，索引要用到定时器来让它自动变化。
这三个盒子里分别存放的是时分秒。
三个盒子利用innerHTML放入计算好的时间。
第一次执行也是间隔毫秒数，所以刷新页面会有空白。
最好用封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白的问题。
