【javascript】元旦倒计时代码

最新推荐文章于 2023-12-27 22:02:36 发布

尤成军军军

最新推荐文章于 2023-12-27 22:02:36 发布

阅读量2.6k

点赞数 1

分类专栏：功能设计 # javascript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_31083947/article/details/128273020

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

功能设计

4 篇文章 0 订阅

订阅专栏

元旦倒计时代码

引言
设计思路
源码
动画效果

引言

马上就是2023年元旦了，公司要求在网站上都需要加上新年的倒计时，今天就来做了吧

设计思路

🐔 获取日期之间的差值
1、使用new Date()获取当前时间的毫秒数
2、使用new Date("01/01/2023")获取2023年1月1日的毫秒数
3、结算当前时间和元旦时间的之间的差值
4、将差值转换成具体的天数及时分秒

🐔 页面时间动态变化
1、设置定时器将数值显示到页面上

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元旦倒计时代码</title>
	</head>
	<body>
		距离2023年元旦还有<span id="days"></span>天<span id="hours"></span>小时<span id="minutes"></span>分钟<span id="seconds"></span>秒
	</body>
	<script type="text/javascript">
		
		var yd_date = new Date("01/01/2023");
		var yd_time = yd_date.getTime();
		var one_second = 1000;
		var one_minute = one_second * 60;
		var one_hour = one_minute * 60;
		var one_day = one_hour * 24;
		
		getRemainTime();
		function getRemainTime(){
			
			var now_date = new Date();
			var now_time = now_date.getTime();
			var now2yd_time = yd_time - now_time;
			
			if(now2yd_time < 0){
				alert("请修改未来时间");
			} else {
				setInterval(getRemainTime,1000);
			}
			
			var days = now2yd_time / one_day;
			document.getElementById("days").innerHTML = parseInt(days);
			
			var hours = (now2yd_time % one_day) / one_hour ;
			document.getElementById("hours").innerHTML = parseInt(hours);
			
			var minutes = (now2yd_time % one_hour) / one_minute ;
			document.getElementById("minutes").innerHTML = parseInt(minutes);
			
			var seconds = (now2yd_time % one_minute) / one_second ;
			document.getElementById("seconds").innerHTML = parseInt(seconds);
		}
		
	</script>
</html>

动画效果

在这里插入图片描述

尤成军军军

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
【javascript】元旦倒计时代码

马上就是2023年元旦了，公司要求在网站上都需要加上新年的倒计时，今天就来做了吧。3、结算当前时间和元旦时间的之间的差值。4、将差值转换成具体的天数及时分秒。1、设置定时器将数值显示到页面上。获取2023年1月1日的毫秒数。🐔 获取日期之间的差值。获取当前时间的毫秒数。🐔 页面时间动态变化。
复制链接

扫一扫