Color CSS aleatorio

Los colores y las animaciones se usan comúnmente en sitios web creados con secuencias de comandos HTML para hacerlos más atractivos y estéticos. A veces, puede ver que estos colores cambian rápidamente en algunos elementos HTML. Esto sucedería debido al uso de funciones "setInterval". Algunos de ustedes pueden haber pensado en cambiar aleatoriamente los colores de los elementos HTML al crear secuencias de comandos HTML. Es posible que haya pensado en una manera fácil de hacer esto, pero no pudo encontrar una solución. Si ese es el caso, este artículo puede ayudarlo a aprender cómo cambiar aleatoriamente el color de un elemento HTML.

Ejemplo #01

Comencemos con el primer ejemplo de este artículo demostrando el uso de la función de selector de color simple para generar colores aleatorios para elementos HTML. Este código de ejemplo comenzó con la etiqueta principal HTML, seguida de la etiqueta principal vacía. Usamos la etiqueta del cuerpo para definir los elementos del cuerpo de esta página HTML, seguida de la etiqueta del script que contiene el estilo de JavaScript para hacer que esta página sea estética y con estilo. El texto del cuerpo se centró dentro de la etiqueta de estilo en línea usando la propiedad "text-align". Aquí se utilizaron dos encabezados de tamaño 1. El primer encabezado usa un estilo en línea para volverse verde usando la propiedad de color. Mientras que el segundo encabezado se especificó con el id "elegir" y la etiqueta de estilo en línea para colorearlo de rojo por un tiempo a través de la propiedad "color". Luego, la etiqueta del botón se usa con el atributo onclick, que obtiene el valor de retorno de la función pickColor(), para especificar qué color mostrar cuando se toca ese botón. Aquí viene el código JavaScript para este script HTML para hacerlo dinámico. Contiene la etiqueta del script seguida del uso de la definición de función para el método pickColor. Este método inicializaba una matriz "Col" que contenía diferentes colores, es decir, usando los números de colores específicos. Se usó otra variable, random_color, para obtener el color aleatorio de la matriz col aplicando las funciones de suelo y aleatorias de la biblioteca matemática. Cualquiera que sea el valor de "Piso" que se calculó, se usaría para obtener el color aleatorio del índice específico de esa matriz. El ID de "selección" del encabezado 2 para este archivo HTML se usó para obtener el ID y se almacenó en la variable "x". A continuación, se aplicó el atributo de estilo "color" a la variable "x" para colorear aleatoriamente el Título 2 utilizando la variable "random_color". Eso es todo sobre este código. Guardémoslo y ejecútelo desde el menú Ejecutar.

La salida en el navegador Chrome se muestra en la imagen a continuación. Muestra dos encabezados seguidos de un simple botón. El primer encabezado es estático, mientras que el segundo encabezado se usó para cambiar su color aleatoriamente cuando un usuario toca el botón.

Antes de tocar el botón, el color del encabezado era rojo. Después de tocarlo, se muestra como se muestra a continuación, es decir, naranja claro:

Si vuelve a tocar el botón, el color del encabezado cambia a amarillo.

Al tocar el botón nuevamente, el color del encabezado cambia a verde.

Entonces, cada toque del botón cambiaría aleatoriamente el color de un encabezado, es decir, azul, verde, amarillo, etc.

Ejemplo #02

Comencemos con el ejemplo avanzado de cambiar aleatoriamente el color de un elemento del archivo HTML. Creamos un archivo HTML que cambia aleatoriamente el color de algunos encabezados después de cada segundo sin usar ningún botón o tocar la sección. También creamos una sección "div" aleatoria y la rellenamos con un color aleatorio al hacer clic en cualquier área de la página HTML. Le recomendamos que lea primero la explicación de la etiqueta "cuerpo" y luego revise esta sección de la explicación de la página HTML. El archivo HTML comenzó con la etiqueta de estilo para colorear los diversos elementos HTML en esta página web. La identificación "#color" se usó para establecer el ancho y la altura de la entrada "más pequeña" "div" en 10em y 6em respectivamente. Las familias de fuentes Título 1, Título 4 y Párrafo se han establecido en sans serif. El texto ha sido centrado. Mientras que la clase "box" se especificó para establecer las propiedades de ancho, alto, elementos de alineación y contenido justificado para la segunda sección "div" al 100%, 33 vh, centro y centro respectivamente. El estilo se hizo aquí:

' Dentro del código JavaScript de este archivo, llamamos a la función setInterval, pasándole un color aleatorio cada milisegundo usando una función setColor. La función setColor tomó el color aleatorio usando la función randomHexaDecimalColorString(), obtuvo el ID de la primera sección "div" y aplicó el color aleatorio al "div" específico. La función changeColor se usó aquí para crear una matriz de colores y seleccionar aleatoriamente un color de su matriz a través de un método de "Piso". Esto se aplicaría a la parte interna "div" del segundo elemento "div" del cuerpo para cambiar aleatoriamente el color de un cuadro "div". La función rgbColor se usó para inicializar el valor de los colores rojo, verde y azul mientras que se usó la función randomNumber anterior.

el aleatorioHexaDecimalColorString() La función obtendría el valor de la combinación de rojo, verde y azul mediante las funciones toString y padStart y volvería a su función de llamada. Que cambiarColorAleatoriamente() función utiliza de nuevo el aleatorioHexaDecimalColorString() Función para cambiar el color de un cuadro de acuerdo con el número de color especificado por el id "Texto". La función clickHandler se usa para cambiar aleatoriamente el color de un cuadro cuando se hace clic en cualquier parte de la sección.

La etiqueta de "cuerpo" HTML contiene el estilo en línea para alinear el texto. Contiene el medio sobre el uso de la propiedad "text-align". Tenemos dos elementos "div" principales para dividir la página en dos secciones. El primero contiene el ID "auto" para distinguirlo, el otro la clase "caja". La primera sección "div" contiene solo un encabezado único de tamaño 1 con su título de encabezado único. La otra sección "div" contiene otro "div" que usó el elemento HTML "p" para agregar el párrafo de 1 línea y el elemento de etiqueta "input" para agregar la identificación del color como Obtener entrada y cambiar el color de ese "div" respectivamente. Además, el encabezado h4 de esta sección "div" usaría el "texto" de identificación para cambiar aleatoriamente el número de color con cada clic en la página HTML. Guardemos y ejecutemos el siguiente código:

El primer encabezado cambiaría de color cada milisegundo. Cuando hace clic en la segunda sección "div" de la página HTML, el cuadro también cambia de color al azar.

Conclusión

Se trata de usar técnicas simples para cambiar aleatoriamente el color de algunos elementos HTML sin mucho trabajo. En nuestros ejemplos, hemos intentado cubrir el uso de la función "pickColor" para seleccionar aleatoriamente un color de una matriz y aplicarlo al elemento específico. Intentamos implementar la función setInterval() para cambiar el color de un elemento específico al instante sin tocar en ninguna parte de la pantalla HTML, es decir, cambio de color automático.

comentarios YAML