您现在的位置是：网站首页> 编程资料编程资料
javascript实现倒计时小案例_javascript技巧_
2023-05-24
392人已围观
简介 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; }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
