网页倒计时制作（js）

最新推荐文章于 2024-09-11 22:45:35 发布

阳光搬运工

最新推荐文章于 2024-09-11 22:45:35 发布

阅读量754

点赞数

分类专栏： web前端基础笔记文章标签： css html5

本文链接：https://blog.csdn.net/weixin_57097732/article/details/119829304

版权

HTML CSS JavaScript 倒计时时间处理

关键词由CSDN通过智能技术生成

笔记同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

web前端基础

30 篇文章 0 订阅

订阅专栏

p标签设定倒计时时长

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
	
    <style>
       *{
		   margin: 0;
		   padding: 0;
	   }
		   
	   html{
		   font-size: 62.5%;
	   }
	   header{
		   background-color: rgba(0,0,0,.5);
		   height: 100vh;
	   }
	   h1{
		   /* border: 1px solid red; */
		   display: flex;
		   justify-content: center;
		   align-items: center;
		   height: 10vw;
	   }
	   .item{
		   /* border: 1px solid red; */
		   display: flex;
		   justify-content: center;
		   align-items: center;
	   }
    </style>
</head>
<body>
	<header>
	   <h1>XXX倒计时</h1>
	   <div class="item">
		   <p id="day">100</p>
    	   <p>天数</p>
	   </div>
	   <div class="item">
	   		   <p id="hour">10</p>
	       	   <p>小时</p>
	   </div>
	   <div class="item">
	   		   <p id="min">10</p>
	       	   <p>分钟</p>
	   </div>
	   <div class="item">
	   		   <p id="sec">10</p>
	       	   <p>秒数</p>
	   </div>
      
	</header>
</body>
<script>
		var dDay = document.getElementById("day");
		var dHour = document.getElementById("hour");
		var dMin = document.getElementById("min");
        var dSec = document.getElementById("sec");
		
		var timer = null;//计时器
		timer = setInterval(function(){
		  getTime();
		}, 1000)
		function getTime(){
				// 获取当前时间
				var date = new Date();
				// 与预定时间做差值
				var date2= new Date("2022-1-1 00:00:00");
				var dis = date2.getTime() - date.getTime();//返回毫秒值
				var time = parseInt(dis/1000);//转成秒数
				// 计算出对应的数值并修改p标签
				var d = parseInt(time/(24*60*60));
				dDay.innerHTML = d;
				var h=parseInt(time%(24*60*60)/(60*60));
				dHour.innerHTML=h;
				var m=parseInt(time%(24*60*60)%(60*60)/60);
				dMin.innerHTML=m;
				var s=parseInt(time%(24*60*60)%(60*60)%60);
				dSec.innerHTML=s;
		}
		getTime();
	</script>
</html>

运行结果：