使用js定时器实现倒计时功能
生活随笔
收集整理的这篇文章主要介绍了
使用js定时器实现倒计时功能
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
先看看效果图：
倒计时使用的技术主要就是js中的定时器。
首先还是先理一下思路，先要确定一个具体的时间，你想从哪个时间到哪个时间，我这个就是从现在的时间到2022年过年，然后使用data对象获取天、小时、分钟、秒，之后再使用定时器让它像上图一样能够一直保持运动的状态。
new data()表示的是当前时间，也就是电脑上的时间，如果前面有个+，表示的当前时间的毫秒，转换为毫秒了。
举个例子：
var date1 = new Date(); var date2 = +new Date(); console.log(date1) console.log(date2)结果如下：
程序代码：
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title></title><style>*{margin: 0;padding: 0;}body{background-color: black;}#div{width: 600px;height: 100px;margin: 100px auto;font-size: 24px;/* 设置颜色 */background-color:rgba(128, 128, 128, 0.4);color:chartreuse;/* 边框圆角 */border-radius: 10px;/* 设置文字居中 */text-align: center;line-height: 100px;} </style></head><body><div id="div"></div><script>// 获取divvar div = document.getElementById('div');// 先调用一次函数，如果不调用刷新的时候会有一点时间显示的是空白count();// 定时器//=>箭头函数，是ES6新增的函数，表示一个匿名函数// =>前面是参数，后面是函数setInterval(() =>count() , 1000);// 封装函数，计算倒计时function count(){var dateNow = +new Date();//当前时间的毫秒数var date2 = +new Date('2023/1/22 00:00:00')//截止时间的毫秒数var cha = date2 - dateNow;//截止时间减去当前时间的毫秒// 计算天时分秒tian = parseInt(cha / (24 * 3600 * 1000)) //天数 1s = 1000msvar yu1 = cha % (24 * 3600 * 1000) //余数hours = parseInt(yu1 / (3600 * 1000)) //小时var yu2 = yu1 % (3600 * 1000)minutes = parseInt(yu2 / (60 * 1000)) //分钟var yu3 = yu2 % (60 * 1000);seconds = parseInt(yu3 / 1000) //秒// 输出 ${}字符串拼接div.innerHTML = `现在距离2022年春节还有:${tian}天，${hours}小时，${minutes}分，${seconds}秒`} </script></body> </html>css部分我是自己加了一点样式，如果想要简单的也可以不加样式，或者自己改一下样式就可以了。
还需要注意的一点是截止时间是阳历的时间，因为获取的当前时间是阳历的，所以截止时间也是阳历的，这点需要注意。
总结
以上是生活随笔为你收集整理的使用js定时器实现倒计时功能的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 一位上海女生所经历过的N次感情，对80
- 下一篇： 机器学习之数据准备