面向K12教学的支持独立图片数组的Javascript数字时钟求助

核心特性 #

• 支持hh:mm格式4个数字位分别配置独立的GIF图片数组，完全适配学生拍摄的不同素材
• 解决GIF仅播放一次的问题：每次数字更新时自动追加时间戳参数，强制浏览器重新加载资源，保证动效每次从头播放
• 代码结构清晰，仅需修改配置区内容即可使用，无需掌握复杂编程知识

完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>学生自制数字时钟</title>
  <style>
    /* 样式可根据需求自行调整 */
    .clock {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 60px;
      font-weight: bold;
    }
    .clock img {
      height: 120px; /* 调整数字GIF的显示高度 */
    }
  </style>
</head>
<body>
  <div class="clock">
    <img id="h1" alt="小时十位">
    <img id="h2" alt="小时个位">
    <span>:</span>
    <img id="m1" alt="分钟十位">
    <img id="m2" alt="分钟个位">
  </div>

  <script>
    // ========== 配置区：仅需修改此处的图片路径即可 ==========
    // 小时十位：仅可能出现0、1、2三个数字，对应三个GIF路径
    const h1Images = [
      '素材/小时十位/0.gif', // 数字0的GIF路径
      '素材/小时十位/1.gif', // 数字1的GIF路径
      '素材/小时十位/2.gif', // 数字2的GIF路径
      '','','','','','','' // 后面7个位置不用修改
    ]

    // 小时个位：可能出现0-9所有数字，依次填写10个GIF路径
    const h2Images = [
      '素材/小时个位/0.gif',
      '素材/小时个位/1.gif',
      '素材/小时个位/2.gif',
      '素材/小时个位/3.gif',
      '素材/小时个位/4.gif',
      '素材/小时个位/5.gif',
      '素材/小时个位/6.gif',
      '素材/小时个位/7.gif',
      '素材/小时个位/8.gif',
      '素材/小时个位/9.gif'
    ]

    // 分钟十位：仅可能出现0-5六个数字，对应六个GIF路径
    const m1Images = [
      '素材/分钟十位/0.gif',
      '素材/分钟十位/1.gif',
      '素材/分钟十位/2.gif',
      '素材/分钟十位/3.gif',
      '素材/分钟十位/4.gif',
      '素材/分钟十位/5.gif',
      '','','','' // 后面4个位置不用修改
    ]

    // 分钟个位：可能出现0-9所有数字，依次填写10个GIF路径
    const m2Images = [
      '素材/分钟个位/0.gif',
      '素材/分钟个位/1.gif',
      '素材/分钟个位/2.gif',
      '素材/分钟个位/3.gif',
      '素材/分钟个位/4.gif',
      '素材/分钟个位/5.gif',
      '素材/分钟个位/6.gif',
      '素材/分钟个位/7.gif',
      '素材/分钟个位/8.gif',
      '素材/分钟个位/9.gif'
    ]
    // ========== 配置区结束 ==========

    // 功能代码无需修改
    const h1El = document.getElementById('h1')
    const h2El = document.getElementById('h2')
    const m1El = document.getElementById('m1')
    const m2El = document.getElementById('m2')

    function updateClock() {
      const now = new Date()
      const hour = String(now.getHours()).padStart(2, '0')
      const minute = String(now.getMinutes()).padStart(2, '0')

      // 给图片地址加时间戳强制重新加载，解决GIF不重播问题
      h1El.src = `${h1Images[hour[0]]}?t=${Date.now()}`
      h2El.src = `${h2Images[hour[1]]}?t=${Date.now()}`
      m1El.src = `${m1Images[minute[0]]}?t=${Date.now()}`
      m2El.src = `${m2Images[minute[1]]}?t=${Date.now()}`
    }

    // 启动时钟
    updateClock()
    setInterval(updateClock, 1000)
  </script>
</body>
</html>

使用说明 #

• 按照配置区的注释，把学生拍摄制作的GIF素材放到对应文件夹，修改配置区的文件路径即可
• 样式部分可以根据需求调整图片大小、间距、背景等参数
• 代码不需要任何额外依赖，保存为.html文件后直接在浏览器打开即可运行

内容的提问来源于stack exchange，提问作者Martijn de Winter