js定时器实现到某一时间的倒计时

设置要显示在页面的格式,css代码省略

	<h1>距离2022年,还有</h1>
    <div class="item">
        <span><span class="day">00</span>天</span>
        <strong><span class="hour">00</span>时</strong>
        <strong><span class="min">00</span>分</strong>
        <strong><span class="second">00</span>秒</strong>
    </div>

获取innerText内容

		var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var min = document.querySelector('.min');
        var second = document.querySelector('.second');

设置目标时间,获取目标时间的时间戳

		var targetTime = new Date('2022-01-01 00:00:00').getTime();

这里先换算一下毫秒与所要时间单位之间的单位

		//换算单位
        var SEC = 1000;
        var MIN = 60 * SEC;
        var HOUR = 60 * MIN;
        var DAY = 24 * HOUR;

下边就是定时器里边的内容,因为我们是用定时器实现的,所以代码运行时的时间要在这里边获取

		setInterval(function () {
            //获取代码运行时的时间戳
            var nowTime = new Date().getTime();
            //目标时间与代码运行时的时间戳差值
            var times = targetTime - nowTime;
            day.innerText = getZero(Math.floor(times / DAY));
            hour.innerText = getZero(Math.floor((times % DAY) / HOUR));
            min.innerText = getZero(Math.floor((times % HOUR) / MIN));
            second.innerText = getZero(Math.floor((times % MIN) / SEC));
        }, 1000);

这里统一一下时间的格式,设置成 xxxx 年 xx 月 xx 日 xx 时 xx 分 xx 秒,逻辑如下:

		function getZero(n) {
            return n > 9 ? n : '0' + n;
        }

最终效果如下: