JavaScript 动态网页时钟：基于图片资源与 setInterval 实现

Mason

发布时间：2026-10-16 | 4人浏览过

原创

利用 JavaScript 结合本地图片资源构建网页动态时钟，通过实时读取系统时间与 DOM 元素属性的交互，实现数字显示的自动更新。本文将分析其底层逻辑并提供优化的代码方案。

设计思路与核心逻辑

该功能的实现主要依赖三个核心步骤：状态获取、数据转换和视图更新。

时间获取：利用浏览器内置的 Date 对象接口读取当前时间。其中 getHours() 返回 0-23 的小时整数，getMinutes() 和 getSeconds() 分别返回 0-59 的分和秒整数。
格式统一：为确保显示长度一致（如 HH:MM:SS），当数值小于 10 时需补零处理，将其转换为字符串拼接。
图片映射：建立一个索引数组存储 0-9 的图片路径。通过字符串下标访问对应数字的图片 URL，并赋值给页面上的占位符图片节点。

<html>
<head>
    <title>动态时钟</title>
    <meta charset="utf-8">
    <style>
        body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #f0f0f0; }
        .clock-container { font-size: 24px; color: #333; }
        img { width: 40px; height: 60px; vertical-align: middle; }
    </style>
    <script>
    function updateClock() {
        // 1. 创建图片映射表
        const images = [
            './images/s0.png', './images/s1.png', './images/s2.png', './images/s3.png', 
            './images/s4.png', './images/s5.png', './images/s6.png', './images/s7.png', 
            './images/s8.png', './images/s9.png'
        ];
        
        // 2. 获取当前时间
        const timeObj = new Date();
        let h = timeObj.getHours();
        let m = timeObj.getMinutes();
        let s = timeObj.getSeconds();
        
        // 3. 不足两位补零
        h = h <= 9 ? '0' + h : h;
        m = m <= 9 ? '0' + m : m;
        s = s <= 9 ? '0' + s : s;
        
        // 4. 拼接时间字符串
        const timeStr = '' + h + m + s;
        
        // 5. 更新 DOM
        document.getElementById("img0").src = images[timeStr.charAt(0)];
        document.getElementById("img1").src = images[timeStr.charAt(1)];
        document.getElementById("img2").src = images[timeStr.charAt(2)];
        document.getElementById("img3").src = images[timeStr.charAt(3)];
        document.getElementById("img4").src = images[timeStr.charAt(4)];
        document.getElementById("img5").src = images[timeStr.charAt(5)];
        
        // 注意：此处仅做展示，实际部署建议清理旧计时器
        if(window.timerId) clearTimeout(window.timerId);
        window.timerId = setTimeout(updateClock, 1000);
    }
    </script>
</head>
<body onload="updateClock()">
    <div class="clock-container">
        <img id="img0" /><img id="img1" />时
        <img id="img2" /><img id="img3" />分
        <img id="img4" /><img id="img5" />
    </div>
</body>
</html>