I'm searching for a script that wil run a digital clock in a webbrowser using different images voor every digit.
I will use it to make a 'Maarten Baas' clock (https://vimeo.com/171061144) with the kids attending my technology and design class. The kids will act like the man in the clock, record it and turn it into a giphy).
I found this nice script here: Digital clock with images
The problem is that it uses the same images for every digit in the clock. I would like to use 4 different arrays of images for every digit 00:00 (hh:mm).
Since I'm a teacher and only know a little about coding (can teach the kids how to use scratch, but that is just about it), It would be very nice if a professional can help me out.
It would be very nice if we can publish the clocks that the kids make.
Nice to have as well: Numbers wil be animated gifs. They should play again every time they are called. I tried to make something already, every gif plays once. But when it is loaded again, it doesn't play again because the browser thinks it has already been played.
testing it at: https://klok.martijndewinter.nl/
We need a new version that only changes the changed bit
I add the milliseonds to the gif to make it play each time
//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>Now I've learned that this question was off-topic, I started to learn how to code javascript myself. I made this clock myself now, but run into some issues that I address here: Clock made out of video's. How to make it start faster and how to make it show the actual time all day? (javascript)
If you would like to think along with me, then I would very much appreciate that.