代码(复制可以修改想要倒计时的时间):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
display: inline-block;
width: 30px;
height: 30px;
/* border: 1px solid red; */
font-size: 24px;
vertical-align: middle;
background-color: black;
}
.maxbox{
width: 250px;
height: 411px;
margin: 0 auto;
background-image: url(./img/1.webp);
background-size: 250px 411px;
color: white;
position: relative;
}
.smallbox{
width: 138px;
height: 65px;
/* border: 1px solid red; */
position: absolute;
top: 190px;
/* transform: translateY(-50%); */
left: 70px;
/* transform: translatex(-50%); */
}
</style>
</head>
<body>
<div class="maxbox">
<div class="smallbox">
<div class="box">距离元旦还有:</div>
<span id="shi"></span>
:
<span id="fen"></span>
:
<span id="miao1"></span>
</div>
</div>
<script>
var shi = document.getElementById("shi");
var fen = document.getElementById("fen");
var maio = document.getElementById("maio1");
function daojishi() {
var olddate = new Date();
var yuandan = new Date("2022 / 1 / 1 ");
yuandan.setHours(0, 0)
var num = yuandan.getTime() - olddate.getTime();
// 获取小时数
xiaoshi = Math.floor((num % (86400 * 1000)) / 3600 / 1000)
console.log(xiaoshi);
xiaoshi = xiaoshi < 10 ? '0' + xiaoshi : xiaoshi;
// 获取分钟数
fenzhong = Math.floor((num % (86400 * 1000 * 3600)) / 60 / 1000) % 60
console.log(fenzhong);
fenzhong = fenzhong < 10 ? '0' + fenzhong : fenzhong;
// 获取秒
miao = Math.floor(num / 1000) % 60
console.log(miao);
miao = miao < 10 ? '0' + miao : miao;
//给i为shi的sapn添加定时小时内容
shi.innerHTML = `${xiaoshi}`
fen.innerHTML = `${fenzhong}`
miao1.innerHTML = `${miao}`
}
setInterval(daojishi, 1000)
</script>
</body>
</html>