js实现倒计时

最新推荐文章于 2023-11-03 14:52:18 发布

夜雨*漂雪

最新推荐文章于 2023-11-03 14:52:18 发布

阅读量396

点赞数 1

本文链接：https://blog.csdn.net/qq_49630267/article/details/126025000

版权

JavaScript 倒计时日期时间 DOM操作定时器

关键词由CSDN通过智能技术生成

这种距离某个时间点还剩下多少时间的倒计时用js怎么实现呢


    <div>
        <span class="day">0</span>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 步骤1：获取元素
        var day = document.querySelector(".day")
        var hour = document.querySelector(".hour")
        var minute = document.querySelector(".minute")
        var second = document.querySelector(".second")
        // 全局变量函数内部可以使用
        var inputTime = +new Date('2022-7-28 18:00:00'); // 返回的是用户输入时间总的毫秒数

        countDown();//我们先调用一次这个函数，防止第一次刷新页面有空白

        // 步骤2：开启定时器
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数

            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
            var d = parseInt(times / 60 / 60 / 24);//天
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d;//把剩余的天数 给小时黑色盒子

            var h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;//把剩余的小时 给小时黑色盒子

            var m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;//把剩余的分钟 给小时黑色盒子

            var s = parseInt(times % 60);//当前的秒
            s = s < 10 ? '0' + S : s;
            second.innerHTML = s;//把剩余的秒 给小时黑色盒子

        }
    </script>