javascript实现倒计时小案例 javascript实现倒计时小案例

本文实例为大家分享了javascript实现倒计时效果的具体代码，供大家参考，具体内容如下
【javascript实现倒计时小案例】效果如下:

文章图片

代码思路: 1、这个倒计时是不断变化的，因此需要定时器来自动变化 ( setInterval )
2、三个黑色盒子里面分别存放时分秒
3、三个黑色盒子利用innerHTML放入计算的小时分钟秒数
4、第一次执行也是间隔毫秒数,因此刷新页面会有空白
5、最好采取封装函数的方法,这样可以先调用一次这个函数
html部分:

距离2022-6-14 24:00:00还有1:2:3

css部分:

div {width: 250px; height: 200px; margin: 200px auto; text-align: center; } span {display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: pink; border-radius: 3px; font-size: 20px; } span:nth-of-type(even) {width: 10px; background-color: #fff; }

javascript部分:

//获取元素let hour = document.querySelector(".hour") //小时let minute = document.querySelector(".minute") //分钟let second = document.querySelector(".second") //秒var inputTime = +new Date('2022-6-14 24: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 ? 'O' + m : m; minute.innerHTML = m; var s = parseInt(times % 60); // 当前的秒s = s < 10 ? '0' + s : s; second.innerHTML = s; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。