Cómo cambiar el fondo de color aleatorio en JavaScript
En JavaScript, puedes cambiar el color de fondo de una página o un elemento HTML generando un color aleatorio y aplicándolo con la propiedad backgroundColor de CSS. Esto se puede lograr utilizando una función que cree colores en formato hexadecimal.
A continuación, te mostramos un ejemplo sencillo de cómo generar un color aleatorio y aplicarlo al fondo de la página:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambiar fondo aleatorio</title>
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<button onclick="cambiarFondo()">Cambiar color de fondo</button>
<script>
function generarColorAleatorio() {
const letras = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letras[Math.floor(Math.random() * 16)];
}
return color;
}
function cambiarFondo() {
const colorAleatorio = generarColorAleatorio();
document.body.style.backgroundColor = colorAleatorio;
}
</script>
</body>
</html>Explicación del código
1. Función generarColorAleatorio: Crea un color hexadecimal aleatorio. Utiliza los caracteres válidos para los colores (0123456789ABCDEF), y los selecciona de manera aleatoria para formar un código de 6 caracteres precedido por #.
2. Función cambiarFondo: Llama a generarColorAleatorio para obtener un color aleatorio y luego lo aplica al fondo de la página mediante document.body.style.backgroundColor.
3. Evento onclick: El botón tiene un evento onclick que ejecuta la función cambiarFondo cuando el usuario hace clic, lo que cambia el color de fondo a uno aleatorio.
Ejemplos adicionales
1. Cambiar el fondo de un div específico:
Si en lugar de cambiar el fondo de toda la página, quieres cambiar solo el fondo de un elemento específico, puedes modificar el código de la siguiente manera:
document.getElementById('miDiv').style.backgroundColor = generarColorAleatorio();2. Cambiar el color automáticamente cada cierto tiempo:
Puedes hacer que el color de fondo cambie automáticamente cada cierto intervalo de tiempo utilizando setInterval:
setInterval(cambiarFondo, 1000); // Cambia cada segundoDocumentación adicional
Para más información sobre manipulación de colores y estilos en JavaScript, consulta la documentación oficial de MDN.
Jorge García
Fullstack developer