假如一开始不调用一次的话，直接用定时器调用的话就会出现一秒钟的空白时间，所以需要先调用一次再来执行定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#box {
width: 415px;
height: 200px;
margin: 200px auto 0;
}
/* 青色的盒子剧中对齐 */
span {
display: inline-block;
width: 100px;
height: 100px;
background-color: aquamarine;
line-height: 100px;
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<div id="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
<script type="text/javascript">
// 获取所有的span表情，也就是青色的盒子
let span = document.querySelectorAll('span');
// 创建终点时间
let daojishi = +new Date('2021-11-28 12:00:00')
// 执行函数的方法
function sj() {
// 获得当前的时间
let shijian = +new Date();
// 终点时间-当前时间再除以1000得出他的秒数
let mshu = (daojishi - shijian) / 1000;
// 获取剩下多少天
let t = parseInt(mshu / 60 / 60 / 24);
t = t < 10 ? '0' + t : t;
span[0].innerHTML = t + '天';
// 获取剩下多少小时
let s = parseInt(mshu / 60 / 60 % 24);
s = s < 10 ? '0' + s : s;
span[1].innerHTML = s + '时';
// 获取剩下多少分钟
let f = parseInt(mshu / 60 % 60);
f = f < 10 ? '0' + f : f;
span[2].innerHTML = f + '分';
// 获取剩下多少秒
let m = parseInt(mshu % 60);
m = m < 10 ? '0' + m : m;
span[3].innerHTML = m + '秒';
}
// 一开始调用一次
sj();
// 每秒调用
setInterval(sj, 1000);
</script>
</html>