用于k12教学的Javascript数字时钟，每个数字都有不同的图像阵列

Question

我正在寻找一个脚本，将运行一个数字时钟在网络浏览器中使用不同的图像声音或每一个数字。

我将用它来制作一个'Maarten Baas‘时钟(https://vimeo.com/171061144)，与参加我的技术和设计课程的孩子们一起使用。孩子们会表现得像时钟上的人，记录下来，并把它变成一个图像)。

我在这里找到了这个很好的脚本：Digital clock with images

问题是它对时钟中的每个数字都使用相同的图像。我想为每个数字00:00 (hh:mm)使用4个不同的图像阵列。

由于我是一名教师，对编程了解不多(可以教孩子们如何使用scratch，但仅此而已)，如果有专业人士能帮我解决问题就太好了。

如果我们能公布孩子们做的钟，那就太好了。

很高兴也有:数字将是动画的gif。他们应该在每次被召唤的时候再玩一次。我已经试过制作一些东西了，每个gif都播放一次。但当它再次加载时，它不会再次播放，因为浏览器认为它已经播放过了。

测试地址：https://klok.martijndewinter.nl/

Answer 1

我们需要一个新版本，它只更改更改的位

我将毫秒加到gif中，让它每次都能播放。

​

//all image URLs are put into this array. feel free to change URLs
const img = {
  "1": "https://klok.martijndewinter.nl/1.gif",
  "2": "https://klok.martijndewinter.nl/2.gif",
  "3": "https://klok.martijndewinter.nl/3.gif",
  "4": "https://klok.martijndewinter.nl/4.gif",
  "5": "https://klok.martijndewinter.nl/5.gif",
  "6": "https://klok.martijndewinter.nl/6.gif",
  "7": "https://klok.martijndewinter.nl/7.gif",
  "8": "https://klok.martijndewinter.nl/8.gif",
  "9": "https://klok.martijndewinter.nl/9.gif",
  "0": "https://klok.martijndewinter.nl/0.gif"
};

const pad = num => String(num).padStart(2, "0"); // to pad the digits 

let oldTime = "000000"; // to compare with

window.addEventListener("load", () => {
  setInterval(() => {
    const today = new Date();
    const h = pad(today.getHours());
    const m = pad(today.getMinutes());
    const s = pad(today.getSeconds());
    const string = `${h}${m}${s}`;
    res.textContent =string
    string.split("").forEach((digit, i) => {
      if (oldTime[i] != digit) document.getElementById("t" + i).src = img[digit] + "?rnd=" + new Date().getTime()
    })
    oldTime = string;
  }, 1000)
})

<span id="res"></span>

<div id="txt"><img id="t0" /><img id="t1" /><img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.colonsemicolon.com%2Fwp-content%2Fuploads%2F2012%2F02%2Fcolon.gif&f=1" /><img id="t2" /><img id="t3" /><img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.colonsemicolon.com%2Fwp-content%2Fuploads%2F2012%2F02%2Fcolon.gif&f=1"
  /><img id="t4" /><img id="t5" /></div>

​

Answer 2

现在我知道这个问题离题了，我开始学习如何自己编写javascript。我现在自己制作了这个时钟，但遇到了一些问题，我在这里解决：Clock made out of video's. How to make it start faster and how to make it show the actual time all day? (javascript)

如果你愿意和我一起思考，我将非常感激。