Generador de color aleatorio - JavaScript

Mientras desarrollan sitios web, los desarrolladores pueden necesitar generar colores aleatorios dinámicamente utilizando JavaScript. Se utiliza en el estilo de la página web, visualizaciones de datos, generación de esquemas de color, desarrollo de juegos y muchos más. Por ejemplo, los desarrolladores crean efectos visuales, como explosiones o efectos de partículas en los juegos, diferencian entre diferentes puntos de datos o categorías en la visualización de datos, etc.

Este tutorial demostrará el procedimiento para generar colores aleatorios en JavaScript.

Cómo generar un color aleatorio en JavaScript?

Para generar color aleatorio en JavaScript, utilice el "Matemáticas.aleatorio ()*16Método que crea un número aleatorio entre 0 y 16. Esto se debe a que es una forma de generar un valor hexadecimal aleatorio, que puede usarse para crear un color aleatorio.

Ejemplo 1: Generar color aleatorio
En un archivo HTML, crearemos un contenedor y agregaremos un elemento que genera los colores aleatorios en el botón Haga clic:

= "ColorContainer">
Haga clic para generar un color aleatorio

Ahora, agregue el código otorgado en el archivo o etiqueta JavaScript:

function ColorGenerator ()
var hexdigits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', ​​'f'];
var colorcode = "";
para (var i = 0; i<6; i++)
ColorCode += HexDigits [Matemáticas.piso (matemáticas.aleatorio ()*16)];

Return '#$ ColorCode'

En el fragmento de código anterior:

• Primero, hemos definido una función "ColorGenerator ()"Donde creamos un"hexdígitos"Mango de números hexadecimales de 0 a 9 y A a F.
• Crear una variable "Codigo de color".
• Entonces, usando el "para"Loop, en cada iteración, los métodos del"Matemáticas"El objeto genera un número aleatorio entre 0 y 16.
• Pase el número de índice resultante al "hexDigits" y almacene el valor de índice correspondiente en la variable "Color COMEDE".
• El proceso se repetirá 6 veces para crear un código de 6 dígitos.
• Finalmente, agregue este código con el "#"Firmar y volver a la función.

Ahora, adjunte el "addEventListener ()Método en el evento de clic del botón. Llamar a la función definida "ColorGenerator ()"Para cambiar el color de fondo de todo el cuerpo:

btn.addEventListener ('click', () =>
documento.cuerpo.estilo.backgroundColor = ColorGenerator ();
);

Producción

Ejemplo 2: generar color aleatorio con código
Aquí, imprimiremos el código de color generado al azar correspondiente con el color utilizando el "innerhtml" propiedad:

btn.addEventListener ('click', () =>
documento.cuerpo.estilo.backgroundColor = ColorGenerator ();
documento.getElementById ("ColorCode").innerhtml = colorGenerator ();
);

La salida muestra el código de color correspondiente con el color de fondo relevante del cuerpo:

Eso se trataba del generador de color aleatorio en JavaScript.

Conclusión

Para generar color aleatorio en JavaScript, cree un código de 6 dígitos usando "Matemáticas"Métodos de objetos en el"para" bucle. En cada iteración, se genera un dígito de código de color y después del incremento en una variable. Este código de color se devuelve con "#" al principio. Este tutorial demostró el procedimiento para generar colores aleatorios en JavaScript.