javaScript做一个倒计时

约 547 字大约 2 分钟

2025-06-09

做js倒计时的初衷

许七分本人因为工作需要，经常会需要知道距离未来哪一天还剩多久，以便计划安排下自己的学习任务也好，工作任务也好。所以自己用javaScript做了一个打开就能看到倒计时的提示。

js倒计时源码

源码是html，html里面加css、js效果代码。

<!DOCTYPE html>
<html lang=zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>距离2026春节倒计时</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        body { 
            background-color: #f2f4f6;
            position: relative;
        }
        .time {
            position: absolute;
            left: 50%;
            top: 40%;
            /* transform: translateY(-50%); */
            transform: translateX(-50%);
            font-size: 30px;
        }
    </style>
</head>

<body>
    <!-- 倒计时输出到div元素内 -->
    <div class="time">

    </div>

    <script>
        // 倒计时函数
        function getTime() {
            // 获取当前时间戳
            let now = +new Date();
            // 获取指定的时间戳，即未来哪天。我这里设置的是2026春节
            let futureTime = +new Date('2026-2-17 00:00:00');
            // 秒数
            let seconds = (futureTime - now) / 1000
            // 转换成天时分秒
            let day = parseInt(seconds / 60 / 60 / 24)
            // 转换不够天数的剩余时间转换成小时
            let h = parseInt(seconds / 60 / 60 % 24)
            // 转换不够小时的剩余时间转换成分钟
            let m = parseInt(seconds / 60 % 60)
            // 转换不够分钟的剩余时间转换成秒数
            let s = parseInt(seconds % 60)
            // 获取html中time类的元素为对象
            let time = document.querySelector('.time');
            // 将倒计时间文字输出到time类的html元素中
            time.innerHTML = `
            距离2026春节还剩：${day}天 ${h}小时 ${m}分钟 ${s}秒
        `
        }
        //先调用一次倒计时函数
        getTime()
        // 定时器，间歇函数。1秒调用一下获取并输出倒计时，让倒计时动起来。
        setInterval(getTime, 1000)
    </script>
</body>

</html>

倒计时效果图(使用浏览器打开html文件)

版权所有

版权归属：许七分

许可证：署名 4.0 国际 (CC-BY-4.0)