js实现倒计时10秒（JS新年倒计时）

时间2025-06-13 19:28:44分类IT科技浏览4276

导读：✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。...

✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。

🍎个人主页：Java Fans的博客

🍊个人信条：不迁怒，不贰过。小知识，大智慧。

💞当前专栏：前端案例分享专栏

✨特色专栏：国学周更-心性养成之路

🥭本文内容：JS新年倒计时

更多内容点击👇

JavaScript—实现手风琴画册

不知不觉，2022年就进入了倒计时！十二月有太多的盼头了，平安夜，圣诞节，第一场雪，跨年倒计时，春节，当然，还有你们！那么我们离每一个日子都有多少天呢？下面我将分享一个我们中国人的传统节日——春节的倒计时吧。其他的时间，可以根据这个方法进行修改计算。

运行效果：

源码分享：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 300px; height: 100px; background-color: aquamarine; margin: 50px auto; text-align: center; line-height: 100px; border:1px solid black; border-radius: 100px; } button{ width: 100px; height: 30px; margin: 0 auto; margin-left: 50%; } </style> </head> <body> <div> </div> <script> var divEle=document.querySelector(div); dateTimes(); //封装时间的函数 function dateTimes(){ // 获取2023年春节到1970年的毫秒数 var date2023=new Date(2023,0,22,0,0,0); var ms2023=date2023.getTime(); var myVar=setInterval(dateTimes,1000); var date=new Date(); //获取当前时间到1970年的毫秒数 var msCurrent=date.getTime(); //时间差:总毫秒数 var timeSc=ms2023-msCurrent; //倒计时：天，时，分，秒 //获取天 var dateDays=Math.floor(timeSc/(1000*60*60*24)); //去掉天数剩余的毫秒数 timeSc=timeSc%(1000*60*60*24); console.log(timeSc); //获取时 var dateHours=Math.floor(timeSc/(1000*60*60)); //去掉时剩余的毫秒数 timeSc=timeSc%(1000*60*60); console.log(timeSc); //获取分 var dateMinutes=Math.floor(timeSc/(1000*60)); //去掉分剩余的毫秒数 timeSc=timeSc%(1000*60); console.log(timeSc); //获取秒 var dateSeconds=Math.floor(timeSc/1000); if(parseInt(dateHours)<10){ dateHours=0+dateHours; } if(parseInt(dateMinutes)<10){ dateMinutes=0+dateMinutes; } if(parseInt(dateSeconds)<10){ dateSeconds=0+dateSeconds; } var dateStr="新年倒计时："+dateDays+天+dateHours+"时"+dateMinutes+"分"+dateSeconds+"秒"; divEle.innerText=dateStr; } </script> </body> </html>

其他倒计时：修改 var date2023=new Date(2023,0,22,0,0,0); 即可，值得注意的是，1月用数字0表示

平安夜倒计时：var date2023=new Date(2022,11,24,0,0,0); 圣诞节倒计时：var date2023=new Date(2022,11,25,0,0,0); 元旦倒计时：var date2023=new Date(2023,0,1,0,0,0);

其他知识快捷链接：时间日期：Date对象

码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识 ，点击关注博主 ，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。