JS新年倒计时
Posted Java Fans
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS新年倒计时相关的知识，希望对你有一定的参考价值。
✅作者简介：热爱国学的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知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。
以上是关于JS新年倒计时的主要内容，如果未能解决你的问题，请参考以下文章