js如何实现倒计时（javaScript实现倒计时功能）
目录
一 、主要思路
二 、css样式
三 、html代码
四 、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>六 、效果展示
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！