Estoy buscando un script que ejecute un reloj digital en un navegador web usando diferentes imágenes para cada dígito.
Lo usaré para hacer un reloj 'Maarten Baas' ( https://vimeo.com/171061144 ) con los niños que asisten a mi clase de tecnología y diseño. Los niños actuarán como el hombre del reloj, lo grabarán y lo convertirán en un giphy).
Encontré este lindo script aquí: Reloj digital con imágenes
El problema es que utiliza las mismas imágenes para cada dígito del reloj. Me gustaría usar 4 matrices diferentes de imágenes para cada dígito 00:00 (hh: mm).
Como soy profesor y solo sé un poco sobre programación (puedo enseñar a los niños cómo usar scratch, pero eso es todo), sería muy bueno si un profesional pudiera ayudarme.
Sería muy bueno si podemos publicar los relojes que hacen los niños.
Es bueno tenerlo también: los números serán gifs animados. Deberían volver a jugar cada vez que los llamen. Traté de hacer algo ya, cada gif se reproduce una vez. Pero cuando se vuelve a cargar, no se vuelve a reproducir porque el navegador cree que ya se ha reproducido.
probándolo en: https://klok.martijndewinter.nl/
Necesitamos una nueva versión que solo cambie el bit cambiado
Agrego los milisegundos al gif para que se reproduzca cada vez
//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>Ahora que aprendí que esta pregunta estaba fuera de tema, comencé a aprender a codificar javascript yo mismo. Hice este reloj yo mismo ahora, pero me encontré con algunos problemas que trato aquí: Reloj hecho de videos. ¿Cómo hacer que comience más rápido y cómo hacer que muestre la hora real todo el día? (javascript)
Si desea pensar junto a mí, se lo agradecería mucho.