运行结果：
完整代码：
<!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>
.maxbox {
width: 640px;
height: 400px;
margin: 200px auto;
background-image: url(./3.jpg);
background-size: 640px 400px;
color: yellow;
position: relative;
}
#tian {
width: 57px;
height: 32px;
font-size: 26px;
position: absolute;
left: 66px;
top: 27px;
background-color: black;
text-align: center;
line-height: 32px;
border-radius: 17px;
}
#shi {
width: 38px;
height: 32px;
position: absolute;
left: 210px;
top: 8px;
font-size: 26px;
background-color: black;
border-radius: 50%;
text-align: center;
line-height: 32px;
}
#fen {
width: 38px;
height: 32px;
position: absolute;
left: 332px;
top: 29px;
font-size: 26px;
background-color: black;
border-radius: 50%;
text-align: center;
line-height: 32px;
}
#miao1 {
width: 38px;
height: 32px;
position: absolute;
left: 467px;
top: 6px;
font-size: 26px;
background-color: black;
border-radius: 50%;
text-align: center;
line-height: 32px;
}
</style>
</head>
<body>
<div class="maxbox">
<div id="tian"></div>
<div id="shi"></div>
<div id="fen"></div>
<div id="miao1"></div>
</div>
<script>
var box = document.querySelector('.maxbox');
var tian = document.getElementById("tian");
var shi = document.getElementById("shi");
var fen = document.getElementById("fen");
var maio1 = document.getElementById("maio1");
function daojishi() {
var nowdate = new Date();
var chunjie = new Date("2022 / 2 / 1 ");
chunjie.setHours(0, 0)
var num = chunjie.getTime() - nowdate.getTime();
tiantime = Math.floor(num / 86400 / 1000);
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;
tian.innerHTML = `${
tiantime}天`
shi.innerHTML = `${
xiaoshi}`
fen.innerHTML = `${
fenzhong}`
miao1.innerHTML = `${
miao}`
}
setInterval(daojishi, 1000)
</script>
</body>
</html>