js制作简单倒计时

最新推荐文章于 2022-05-26 19:09:18 发布

Hairui瑞

最新推荐文章于 2022-05-26 19:09:18 发布

阅读量376

点赞数 4

分类专栏：前端文章标签：倒计时 JavaScript

本文链接：https://blog.csdn.net/qq_44322357/article/details/103245102

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图

具体思路：
通过计算目标时间到目前时间的时间差，然后将时间差转化为时分秒，具体转化在代码中体现。

天：seconds/60/60/24
小时：seconds/60/60%24
分钟：seconds/60%60
秒：seconds%60

代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>倒计时</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#djs{
				width: 600px;
				display: block;
				margin: 0 auto;
				color: red;
				border: 1px solid red;
				text-align: center;
				font-size: 24px;
				
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				setInterval(function(){
					//获取当前时间的毫秒数
					var nowTime = new Date();
					var lastTime = new Date("2020-1-1 00:00:00");
					//计算时间差
					var ms = lastTime.getTime() - nowTime.getTime();
					var seconds = parseInt(ms/1000);
					//计算天
					var day = parseInt(seconds/60/60/24);
					//计算小时
					var hour = parseInt(seconds/60/60%24);
					//计算分钟
					var min = parseInt(seconds/60%60);
					//计算秒数
					var miao = parseInt(seconds%60);
					var djs = document.getElementById("djs");
					djs.innerHTML = "距元旦还有 "+day + " 天 " + hour + " 小时" + min +" 分钟 " + miao + "秒";
				},1000)
			}
		</script>
	</head>
	<body>
		<p id="djs"></p>
	</body>
</html>