js原生倒计时效果案例

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        text-align: center;
    }

    h1 {
        margin: 100px 0;
    }

    div {
        margin: 50px auto 0;
    }

    div span {
        padding: 10px;
        background-color: #000;
        color: #fff;
        margin: 10px;

    }
</style>

<body>
    <h1>距离2021-1-1倒计时</h1>
    <div>
        <span class="day">1</span>天
        <span class="hour">2</span>时
        <span class="minute">3</span>分
        <span class="second">4</span>秒
    </div>
    <script>
        //1.获取元素
        let day = document.querySelector('.day');//天的盒子
        let hour = document.querySelector('.hour');//小时的盒子
        let minute = document.querySelector('.minute');//分钟的盒子
        let second = document.querySelector('.second');//秒的盒子
        let inputTime = +new Date('2021-1-1 00:00:00');//返回的是用户输入时间总的毫秒数

        countDown();//我们先调用一次这个函数防止第一次刷新页面有空白
        //2.开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            let nowTime = +new Date();//返回当前时间总的毫秒数
            let times = (inputTime - nowTime) / 1000;//times是剩余时间总的秒数
            let d = parseInt(times / (60 * 60 * 24));//天
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d;
            let h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;//把剩余小时给 小时黑色盒子
            let m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;//
            let s = parseInt(times % 60); //秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }

    </script>
</body>

</html>
原文链接：https://blog.csdn.net/weixin_45730243/article/details/111625974