倒计时效果，如下图：

知识储备

1. +new Date() 获取时间戳的方法
2. setInterval(callback,time) 定时器，两个参数，第一个参数是回调函数，第二个参数是定时器的时间，以毫秒为单位
3. clearInterval 取消定时器

html

		<div><span></span><span></span><span></span></div>

css

		div{margin: 300px;}span{display: inline-block;width: 40px;height: 40px;background-color: black;text-align: center;line-height: 40px;color: white;font-size: 20px;font-weight: 900;}

js

		// 获取元素var spans = document.querySelectorAll('span');var targetTime = +new Date('2022-8-4'); // 七夕情人节2022年  目标时间countDown(); // 提前掉一次函数，避免页面刷新第一秒倒计时不出现setInterval(countDown,1000); //定时器function countDown(){var nowTime = +new Date(); // 当前时间的时间戳var minus = targetTime - nowTime; // 目标时间-当前之间的时间戳的差var hours = parseInt(minus / 1000 / 60 / 60 ); // 获取小时hours = hours / 10 > 1 ? hours : '0' + hours; // 处理个位数不好看的情况spans[0].innerText = hours; // 小时var minutes = parseInt((minus - hours * 1000 * 60 * 60) / 1000 / 60 );// 获取分钟minutes = minutes / 10 > 1 ? minutes : '0' + minutes;// 处理个位数不好看的情况spans[1].innerText = minutes;// 分钟var seconds = parseInt((minus - hours * 1000 * 60 * 60 - minutes * 1000 * 60) / 1000 );// 获取秒数seconds = seconds / 10 > 1 ? seconds : '0' + seconds;// 处理个位数不好看的情况spans[2].innerText = seconds;// 秒数}