元旦倒计时（JS计时器）

通过js编写一个距离2022年元旦还剩多少天的计时器

首先我们计算出2022-1-1日距离今天还有多少天

代码如下

<script>

var nowTimer = +new Date();

var valueTimer = +new Date("2022-1-1 12:00");

var timer = (valueTimer - nowTimer) / 1000;

var d = parseInt(timer / 60 / 60 / 24);

d = d < 10 ? "0" + d : d;

var h = parseInt(timer / 60 / 60 % 24);

h = h < 10 ? "0" + h : h;

var m = parseInt(timer / 60 % 60);

m = m < 10 ? "0" + m : m;

var s = parseInt(timer % 60);

s = s < 10 ? "0" + s : s;

document.write(d + "天" + h + "时" + m + "分" + s + "秒");

</script>

接着将他封装到函数里面，并添加定时器，让它进行倒计时

完整代码如下

<script>

function countDown() {

document.body.innerHTML = '';

var nowTimer = +new Date();

var valueTimer = +new Date("2022-1-1 12:00");

var timer = (valueTimer - nowTimer) / 1000;

var d = parseInt(timer / 60 / 60 / 24);

d = d < 10 ? "0" + d : d;

var h = parseInt(timer / 60 / 60 % 24);

h = h < 10 ? "0" + h : h;

var m = parseInt(timer / 60 % 60);

m = m < 10 ? "0" + m : m;

var s = parseInt(timer % 60);

s = s < 10 ? "0" + s : s;

document.write(d + "天" + h + "时" + m + "分" + s + "秒");

}

countDown();

setInterval(countDown, 1000);

</script>

效果如下

当然可以进行页面优化，这里只是告诉大家一个实现原理。

如有错误之处，敬请指正！