JS新年倒计时

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

✅作者简介热爱国学的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知识。与此同时对于日常生活有困扰的朋友欢迎阅读我的第四栏目《国学周更—心性养成之路》学习技术的同时我们也注重了心性的养成。

在这里插入图片描述

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6