Este tutorial demostrará el procedimiento para generar colores aleatorios en JavaScript.
¿Cómo generar color aleatorio en JavaScript?
Para generar colores aleatorios en JavaScript, utilice el ' Matemáticas.aleatoria()*16 ” 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 se puede usar para crear un color aleatorio.
Ejemplo 1: generar color aleatorio
En un archivo HTML, crearemos un contenedor y agregaremos un elemento
< ID de tramo = 'colorContainer' >
< identificación del botón = 'btn' > Haga clic para generar color aleatorio botón >
durar >
Ahora, agregue el código dado a continuación en el archivo JavaScript o en la etiqueta
- Primero, hemos definido una función “ colorGenerator() ” donde creamos un “ dígitoshexadecimales ” matriz de números hexadecimales del 0 al 9 y de la A a la F.
- Crear una variable “ Codigo de color ”.
- Luego, 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 a 'hexDigits' y almacene el valor de índice correspondiente en la variable 'colorCode'.
- 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 ' agregarEventListener() ” método en el evento de clic del botón. Llame a la función definida “ colorGenerator() ” para cambiar el color de fondo de todo el cuerpo:
bn. agregarEventListener ( 'hacer clic' , ( ) => {documento. cuerpo . estilo . color de fondo = colorGenerator ( ) ;
} ) ;
Producción
Ejemplo 2: generar color aleatorio con código
Aquí, imprimiremos el código de color generado aleatoriamente correspondiente con el color usando el ' HTML interno ' propiedad:
documento. cuerpo . estilo . color de fondo = colorGenerator ( ) ;
documento. getElementById ( 'Codigo de color' ) . HTML interno = colorGenerator ( ) ;
} ) ;
La salida muestra el código de color correspondiente con el color de fondo relevante del cuerpo:
Eso fue todo sobre el generador de colores aleatorios en JavaScript.
Conclusión
Para generar colores aleatorios en JavaScript, cree un código de 6 dígitos usando ' Matemáticas ” métodos de objeto en el “ para ' bucle. En cada iteración, se genera un dígito de código de color y se incrementa posteriormente en una variable. Este código de color se devuelve con '#' al principio. Este tutorial demostró el procedimiento para generar colores aleatorios en JavaScript.