Puedo generar códigos simples usando el operador de módulo y lo entiendo en un nivel abstracto, pero tengo problemas para ver el concepto/idea en el código real. ¿Alguien puede explicarme usando esta versión simple que hice para un bucle infinito para cambiar el fondo? Realmente agradecería algo de ayuda. Esto y la recursividad realmente me están haciendo pasar un mal rato. Simplemente no puedo ver lo que hacen cuando leo el código
let i = 0; function mud() { const doc = document.body; let colour = ["#5FA4FF", "#5DA3FF", "#02C2F1", "#2982F8"]; doc.style.backgroundColor = colour[i]; i = (i + 1) % colour.length; } setInterval(mud, 2000);Exactamente en este código, funciona como un ciclo infinito porque % colour.length siempre dará un número menor que colour.length y cuando agrega 1 , simplemente pasa de 0 a colour.length (no incluido)
El % está tomando el resto de la división. Aquí hay un ejemplo interactivo basado en su código. Las variables se agregan al div para que pueda ver cómo cambian sus valores con el color.
var mod = document.querySelector("#mod"); let i = 0; function mud() { let colour = ["#5FA4FF", "#5DA3FF", "#02C2F1", "#2982F8"]; mod.style.backgroundColor = colour[i]; let dividend = (i + 1); //get the remainder of dividend (i+1) divided by color.length (4) i = dividend % colour.length; mod.innerText = JSON.stringify({ dividend, divisor: colour.length, remainder:i, colorHex: colour[i] }, null, 2); } setInterval(mud, 2000); div { width: 200px; height: 200px; background-color: lightblue; white-space: pre; font-family: monospace; padding: 10px; } <html> <body> <div id="mod"></div> </body> </html>