效果：
源码：
<!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>倒计时</title>
<style>
.box>div {
width: 100px;
height: 50px;
color: red;
font-size: 30px;
float: left;
margin-right: 20px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h1>距离2022年1月1日还有</h1>
<!-- 天 -->
<div class="day"></div>
<!-- 时 -->
<div class="hour"></div>
<!-- 分 -->
<div class="minute"></div>
<!-- 秒 -->
<div class="second"></div>
</div>
<script>
// 获取 天、时、分、秒
var day = document.querySelector('.day');
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var innerTime = new Date('2022-1-1 00:00:00');
Time();
// 计时器
setInterval(Time, 1000);
// 事件函数
function Time() {
var nowTime = new Date();
var times = (innerTime - nowTime) / 1000;
var d = parseInt(times / 60 / 60 / 24)
d = d < 10 ? '0' + d : d;
day.innerHTML = d + "天"
var h = parseInt(times / 60 / 60 % 24)
h = h < 10 ? '0' + h : h;
hour.innerHTML = h + "时";
var m = parseInt(times / 60 % 60)
m = m < 10 ? '0' + m : m;
minute.innerHTML = m + "分";
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s + "秒";
}
</script>
</body>
</html>