Necesito hacer una función que cambie el color de fondo a varios colores (como una animación). He usado for loop para cambiar el código de color hexadecimal. Pero solo yo puedo ver el cambio en un solo color.
function changeColors() { var colors = 000100; for (var i = 0; i < 99999; i++) { colors += i; var x = (document.body.style.backgroundColor = "#" + colors); } } changeColors(); body { background-color: #80eb80; } <html> <body></body> </html>function changeHex() { let hex = '#'; const hexValues = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']; for (let i = 0; i < 6; i++) { const index = Math.floor(Math.random() * hexValues.length); hex += hexValues[index]; } document.querySelector('body').style.backgroundColor = hex; } setInterval(() => changeHex(), 1500);Puedes comprobarlo por esta URL aquí
No necesitas JavaScript para esto. Esto se puede hacer fácilmente usando animación CSS.
@keyframes bg { 0% { background: #000000; } 25% { background: #000099; } 50% { background: #009999; } 75% { background: #999999; } 100% { background: #000000; } } body { background: #000; animation: bg 5s linear infinite; }Solo cambia los colores a lo que quieras. Ejemplo de trabajo: https://codepen.io/CodinCat/pen/bGaYRVz?editors=0100
Si necesita iniciar la animación de forma dinámica mediante JavaScript, simplemente coloque la parte de la animación en una clase CSS y cambie la clase.
Y solo algunas notas adicionales. La razón por la que su código no funciona es porque su ciclo for es síncrono. Todo el bucle for finaliza inmediatamente, tal vez unos pocos milisegundos. Los navegadores son lo suficientemente inteligentes como para ejecutar JavaScript a la vez y luego volver a pintar la pantalla solo una vez.