Color aleatorio CSS

Los colores y las animaciones se utilizan ampliamente en sitios web construidos por las secuencias de comandos HTML para que sean más agradables y estéticos. A veces, estos colores se pueden ver cambiando rápidamente en algún elemento de 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 mientras realizan secuencias de comandos HTML. Es posible que haya pensado en una forma pura de hacerlo, pero no pudo encontrar la solución. Si es así, este artículo es que obtenga experiencia en cambiar el color de cualquier elemento de HTML al azar.

Ejemplo # 01

Comencemos con el primer ejemplo de este artículo demostrando el uso de la función de color de selección simple para generar colores aleatorios en elementos HTML. Este código de ejemplo comenzó desde la etiqueta principal HTML seguida de la etiqueta de cabeza vacía. Hemos estado usando la etiqueta del cuerpo para definir los elementos del cuerpo de esta página HTML, seguido de la etiqueta de script que contiene el estilo JavaScript para hacer esta página estética y estilo. El texto del cuerpo se ha alineado con el centro utilizando la propiedad "Alineación de texto" dentro de la etiqueta de estilo en línea. Dos encabezados de tamaño 1 se han utilizado aquí.

El primer encabezado utiliza un estilo en línea para colorear en verde utilizando la propiedad de color. Mientras que el segundo encabezado se ha especificado con la identificación de "selección" y la etiqueta de estilo en línea para colorearlo rojo por un tiempo a través de la propiedad "color". Después de esto, 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 debe mostrarse al tocar este botón. Aquí viene el código JavaScript para este script HTML para que sea dinámico. Contiene la etiqueta de script seguida de la definición de uso de funciones para el método "pickcolor". Este método ha estado inicializando una matriz "col" que toma diferentes colores dentro de él, yo.mi., Usando los números de color específicos.

Otra variable, "Random_Color", se ha utilizado para obtener el color aleatorio de la matriz "col" aplicando las funciones "piso" y "aleatorias" de la biblioteca de matemáticas. Cualquiera que se haya calculado el valor "piso", se utilizaría para obtener el color aleatorio del índice específico de esta matriz. La identificación de "selección" del encabezado 2 para este archivo HTML se ha utilizado para obtener la ID y guardado en la variable "X". Después de eso, el "color" del atributo de estilo se aplicó a la variable "x" al encabezado de color al azar 2 utilizando la variable "random_color". Esto es lo que se trata de este código. Guardémoslo y ejecutándolo con el menú "Ejecutar".

La salida en el navegador Chrome se muestra en la siguiente imagen. Muestra dos encabezados seguidos de un botón simple. El primer encabezado es estático, mientras que el segundo encabezado se ha utilizado para cambiar aleatoriamente su color cada vez que un usuario aprovecha el botón.

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

Nuevamente tocando el botón, el color del encabezado se vuelve amarillo.

Tocar el botón Una vez más cambia el color del encabezado a verde.

Así, cada toque en el botón cambiaría aleatoriamente el color de un encabezado, yo.mi., azul, verde, amarillo, etc.

Ejemplo # 02

Comencemos con el ejemplo avanzado de cambiar aleatoriamente el color de algún elemento del archivo HTML. Hemos creado un archivo HTML que cambiará aleatoriamente el color de algunos encabezados después de cada segundo sin usar ningún botón o tocar en la sección. Además, crearemos una sección "div" aleatoria y la llenaremos con cualquier color aleatorio al hacer clic en cualquier área de la página HTML. Le sugerimos que lea primero la explicación de la etiqueta "cuerpo" y luego pase por esta sección de la explicación de la página HTML. El archivo HTML comenzó con la etiqueta de estilo para colorear los diferentes elementos HTML en esta página web. La ID "#Color" se ha utilizado para establecer el ancho y la altura de la entrada "más pequeña" "Div" a 10EM y 6EM, respectivamente. El encabezado 1, el encabezado 4 y la familia de fuentes de párrafo se han establecido en sans-serif. El texto ha sido alineado con el centro. Mientras que la clase "Box" se ha especificado para establecer el ancho, la altura, el alineación de elementos y justificar la propiedad del contenido para la segunda sección "Div" a 100%, 33 VH, centro y centro, respectivamente. El estilo se ha hecho aquí:

'

Dentro del código JavaScript de este archivo, hemos estado llamando a la función "setInterval" al pasarlo de un color aleatorio con la ayuda de una función "setColor" después de cada milisegundo. La función "SetColor" ha estado tomando el color aleatorio utilizando la función "RandomeHexadecimalColorString ()", obteniendo la identificación de la primera sección "DIV" y aplicando el color aleatorio en el "div" particular ". La función "Changecolor" se ha utilizado aquí para crear una variedad de colores y elegir aleatoriamente un color de su matriz mediante un método "piso".

Esto se aplicaría a la sección "div" interna del segundo elemento "div" del cuerpo para cambiar aleatoriamente el color de una caja "div". La función "RGBColor" se ha utilizado para inicializar el valor de los colores rojos, verdes y azules mientras usa la función "RandomNumber" anterior.

Th randomHexadecimalColorString () La función sería obtener el valor para la combinación roja, verde y azul utilizando la función "tostring" y "padStart" y volver a su función de llamada. El Changecolorrandomly () la función vuelve a usar el randomHexadecimalColorString () función para cambiar el color de un cuadro de acuerdo con el número de color especificado por la identificación "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 HTML "Body" contiene el estilo en línea para alinear el texto. Contiene el centro mediante el uso de la propiedad "Align de texto". Tenemos dos principales elementos "div" para dividir la página en 2 secciones. El primero contiene la ID "Auto" para la diferenciación, mientras que el otro contiene la clase "Box". La primera sección "Div" solo contiene un solo rumbo de tamaño 1 con su título de rumbo único. La otra sección "Div" contiene otra "div" en ella que ha estado usando el elemento HTML "P" para agregar el párrafo de 1 línea y el elemento de etiqueta de "entrada" para obtener la ID de color como entrada y cambiar el color de esto "Div" según eso.

Junto con eso, el encabezado H4 de esta sección "Div" usaría el "texto" de ID 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 su color después de cada milisegundo. Al hacer clic en la segunda sección "Div" de la página HTML, el cuadro también cambiará su color al azar.

Conclusión

Se trata de usar técnicas simples para cambiar aleatoriamente el color de algunos elementos HTML sin trabajo duro. En nuestros ejemplos, hemos tratado de cubrir el uso de la función "PickColor" para elegir aleatoriamente un color de una matriz y aplicarlo al elemento específico. Hemos intentado implementar la función setInterval () para cambiar instantáneamente el color de un elemento específico sin tocar en algún lugar de la pantalla HTML, I.mi., cambio de color automático.