位置: IT常识 - 正文
javaScript实现倒计时功能(js倒数)
编辑：rootadmin目录
一、主要思路
二、css样式
三、html代码
四、js内容
五、完整代码展示
六、效果展示
一、主要思路
推荐整理分享javaScript实现倒计时功能(js倒数)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js foreach倒序,js倒序输出数字,js倒序排列,js倒叙输出,js倒序输出数字,js倒序,js倒叙输出,js倒置字符串,内容如对您有帮助，希望把文章链接给更多的朋友！
1.通过内置时间函数实例化日期对象获取当前时间 new Date。
2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。
3.最后把所获得的内容赋值给定义的变量。
二、css样式主要为了内容在页面展示美观，稍微美化一下。
<style> p{ font-size: 36px; margin: 0 auto; text-align: center; line-height: 500px; } span{ color: red; } </style>三、html代码定义一个默认格式为JavaScript引入定义变量。
<p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>四、js内容1.首先获取html里面的spans里的全部标签用querySelectorAll获取。
2.用endTime标签定义结束时间，并给结束时间赋值。
3.同理，用newTine标签定义结束标签。
4.定义diffTime用来取结束时间减去现在时间获取的毫秒。
5.getTime标签主要用来将获取的时间转化为毫秒形式。
6.除以1000是提前将毫秒转化为秒。
var spans = document.querySelectorAll('span'); var endTime = new Date ('2022-10-1 12:00:00').getTime(); var newTime = new Date ().getTime(); var diffTime = (endTime-newTime)/1000;1.定义day,hour,min,sen用来定义倒计时的天、时、分、秒。
2.parseInt用来将得到的值转化为整数形式。
3.用得到的秒/60得到多少分再/60得到多少时再/24得到多少天。
4.hour/60/60%24：用所得的时间把大数除以24取余得到还要多少小时，分，秒同理。
var day = parseInt(diffTime/60/60/24); var hour = parseInt(diffTime/60/60%24); var min = parseInt(diffTime/60%60); var sen = parseInt(diffTime%60);将所得到的天、时、分、秒通过innerText方式给之前定义span标签赋值。
spans[0].innerText = day; spans[1].innerText = honur; spans[2].innerText = min; spans[3].innerText = sen;最后将整个JavaScript中的内容定义一个函数中，在定时器中调用整个函数实现倒计时的效果。
showTime是我定义的函数名，1000代表1000毫米循环一次函数。
setInterval(showTime,1000)五、完整代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> p { font-size: 36px; margin: 0 auto; text-align: center; line-height: 500px; } span { color: red; } </style></head><body> <p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p> <script> function showTime() { var spans = document.querySelectorAll('span'); var endTime = new Date('2022-10-1 12:00:00').getTime(); var newTime = new Date().getTime(); var diffTime = (endTime - newTime) / 1000; var day = parseInt(diffTime / 60 / 60 / 24); var honur = parseInt(diffTime / 60 / 60 % 24); var min = parseInt(diffTime / 60 % 60); var sen = parseInt(diffTime % 60); spans[0].innerText = day; spans[1].innerText = honur; spans[2].innerText = min; spans[3].innerText = sen; } setInterval(showTime, 1000) </script></body></html>六、效果展示上一篇：使用Amazon SageMaker构建高质量AI作画模型Stable Diffusion(使用灭火器时要对准火焰的什么部位喷射)