js 实现可动时间倒计时

最新推荐文章于 2023-02-20 16:30:33 发布

賣可樂的男孩

最新推荐文章于 2023-02-20 16:30:33 发布

阅读量219

点赞数

分类专栏：前端小案例文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/qq_52147099/article/details/126755480

版权

前端小案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

时间可以走：
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日期倒计时</title>
		<style type="text/css">
			p{
				margin-top: 160px;
				font-size: 30px;
				color: #000000;
				text-align: center;
			}
			.box{
				margin-top: 10px;
				font-size: 25px;
				color: #000000;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p>距离中秋还有：</p>
		<div class="box" id="box"></div>
		
		<script type="text/javascript">
			(function(){
				//获取box
				var box = document.getElementById("box");
				//定义时间
				var aftertime = new Date("2022-9-10 0:0:0");
				//调用函数
				runTime();
				//开启定时器，1秒显示一下
				var inter = setInterval(runTime,1000);
				
				function runTime(){
					//获取当前时间
					var time = new Date();
					// console.log(aftertime.getTime())
					// console.log(time.getTime())
					
					//计算相差时间
					var datsec = Math.floor((aftertime.getTime()-time.getTime())/1000);
					// console.log(datsec)
					//当计时结束时，显示
					if(datsec<=0){
						clearInterval(inter);
						
						box.innerHTML='倒计时结束';
						
						return;
					}
					//计算天数
					var days = Math.floor(datsec/(3600*24));
					//计算小时
					var sec = datsec-days*24*3600;
					var hours = Math.floor(sec/3600);
					//计算分钟
					sec  -= hours*3600;
					var min = Math.floor(sec/60);
					//计算秒
					sec -= min*60 ;
					//处理个位数补零
					days = addZero(days);
					hours = addZero(hours);
					min = addZero(min);
					sec = addZero(sec);
					//打印
					var content = days+'天'+hours+'时'+min+'分'+sec+'秒';
					box.innerHTML  = content;	
				}
				
				function addZero(n){
					return n<10 ? '0' + n : n;
				}
			})()
		</script>
	</body>
</html>