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>
运行结果: