今天制作一个商城项目距离抢购还剩多长时间的一个小功能
首先要知道这个倒计时是不断的变化的，所以需要用到定时器来自动变化(setInterval)，有三个标签存放时分秒，再利用innerHTML将计算出来的时间放入三个标签内，第一次执行也是间隔毫秒数，因此刷新页面会有空白，我们最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </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-5 23:59:00'); // 返回的是用户输入时间总的毫秒数 // 先调用一次这个函数，防止第一次刷新页面有空白 countDown(); // 开启定时器 setInterval(countDown, 1000); function countDown() { var nowTime = new Date(); // 返回的是当前时间总的毫秒数 // 输入时间减去当前时间再除以1000，得到剩余秒数 // times就等于剩余秒数 var times = (inputTime - nowTime) / 1000; // (times / 60 /60 % 24)这是计算时间的公式 var h = parseInt(times / 60 / 60 % 24); //时 // h < 10就在前面加个0 因为我们这个功能的效果是时分秒都是两位数的， // 小于10就是1~9 大于10就是10~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>
