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

Posted 2023-03-17

【中文标题】Javascript 数字时钟，每个数字都有不同的图像阵列，用于 k12 教育

【英文标题】：Javascript digital clock with every digit a different image array for k12 education

【发布时间】：2021-12-29 10:54:21

【问题描述】：

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

我将用它来制作一个“Maarten Baas”时钟 (https://vimeo.com/171061144)，让孩子们参加我的技术和设计课程。孩子们会像钟表里的人一样，记录下来，然后把它变成一个 giphy）。

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

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

由于我是一名老师，对编码知之甚少（可以教孩子们如何使用scratch，但仅此而已），如果有专业人士可以帮助我，那就太好了。

如果我们可以发布孩子们制作的时钟，那就太好了。

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

在以下位置进行测试：https://klok.martijndewinter.nl/

【问题讨论】：

***.com/help/on-topic: “要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引自以为是的答案和垃圾邮件。”

Leuk dat je de moeite hebt 基因组。 Dat helpt me toch weer een beetje vooruit。 Het werkt goed, de golfjes worden steeds opnieuw geladen。 Echter wordt bij een decimaal met een 0, nu de 0 niet meer geladen。 Daardoor wordt 20:50 2:5。

【参考方案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>

【讨论】：

这行得通。但是...当小数点以 0 结尾时，不会显示 0。所以 20:50 显示为 2:5

我忘了补课

【参考方案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)

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。