元旦倒计时（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;//天数少于十天前面加0（优化页面）
var h = parseInt(timer / 60 / 60 % 24);
h = h < 10 ? "0" + h : h;//小时少于十前面加0
var m = parseInt(timer / 60 % 60);
m = m < 10 ? "0" + m : m;//分钟少于十前面加0
var s = parseInt(timer % 60);
s = s < 10 ? "0" + s : s;//秒数少于十前面加0
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;//天数少于十天前面加0（优化页面）
        var h = parseInt(timer / 60 / 60 % 24);
        h = h < 10 ? "0" + h : h;//小时少于十前面加0
        var m = parseInt(timer / 60 % 60);
        m = m < 10 ? "0" + m : m;//分钟少于十前面加0
        var s = parseInt(timer % 60);
        s = s < 10 ? "0" + s : s;//秒数少于十前面加0
        document.write(d + "天" + h + "时" + m + "分" + s + "秒");
    }
    countDown();
    setInterval(countDown, 1000);
</script>

效果如下

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

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