Estoy trabajando en un código que cuenta los metros que han recorrido algunos perros. Es solo un gif constantemente en bucle. Ahora quería mostrar una imagen cada 50 metros durante unos 3 segundos. Así es como lo he probado:
if (i % Number.isInteger(50)) { document.getElementById("orange").style.display = "block"; }Así lo he probado pero no funciona. ¿Puede alguien ayudarme con eso? ¡Gracias!
Puedes usar PISO :
let frames = Math.floor(i / 50) Será 0 hasta 1==50 , luego será 1 hasta i==100 .
Entonces, 1234 pasos le darán 24 fotogramas jugados.
Luego tienes que decidir cuántas imágenes tienes, digamos 5 imágenes:
let currentImageIndex = itterations % 5; Eso hará que sea 0,1,2,3,4, 0 ,... Eso significa que en nuestro ejemplo: 24%5 = 4, muestra la quinta imagen (porque 0 es la primera, eso hace que 4 sea la quinta imagen).
document.getElementById("my-image").src = `frame${currentImageIndex}.png`;Si la persona diera unos pasos más, 1251 pasos, divididos por 50 = 25 fotogramas, módulo 5 -> currentImageIndex==0.
Nota: esto no se ha probado, pero debería darle algo para construir
Nota: Su solución actual no funciona porque Number.isInteger(50) siempre devuelve verdadero porque 50 es un número entero. No convierte nada, solo prueba que es un número entero.