CSS Cor aleatória

Cores e animações são amplamente utilizadas em sites construídos por scripts html para torná -los mais agradáveis ​​e estéticos. Às vezes, essas cores podiam ser vistas mudando rapidamente em algum elemento de html. Isso aconteceria devido ao uso de funções "setInterval". Alguns de vocês podem ter pensado em mudar aleatoriamente as cores dos elementos HTML enquanto fazia script html. Você pode ter pensado em alguma maneira pura de fazer isso, mas não conseguiu encontrar a solução. Nesse caso, este artigo é para você obter experiência em mudar a cor de qualquer elemento de html aleatoriamente.

Exemplo # 01

Vamos começar com o primeiro exemplo deste artigo, demonstrando o uso da função de cor de escolha simples para gerar cores aleatórias em elementos html. Este código de exemplo começou a partir da etiqueta principal HTML seguida pela etiqueta de cabeça vazia. Temos usado a tag corporal para definir os elementos do corpo desta página HTML, seguida pela etiqueta de script que contém estilo JavaScript para tornar esta página estética e com estilo. O texto do corpo foi alinhado ao centro usando a propriedade "Alinhamento de texto" dentro da tag de estilo embutido. Dois títulos do tamanho 1 foram usados ​​aqui.

O primeiro título usa estilo embutido para colorir -se verde usando a propriedade Color. Enquanto o segundo título foi especificado com o ID "Pick" e a tag de estilo em linha para colori -la por um tempo através da propriedade "Color". Depois disso, a tag de botão é usada com o atributo onclick, obtendo o valor de retorno da função "PickColor ()" para especificar qual cor deve ser exibida ao tocar neste botão. Aí vem o código JavaScript para este script html para torná -lo dinâmico. Ele contém a etiqueta de script seguida pelo uso da definição de função para o método "PickColor". Este método está inicializando uma matriz "Col" levando cores diferentes dentro dele, eu.e., Usando os números de cores específicos.

Outra variável, "Random_color", foi usada para obter a cor aleatória da matriz "Col" aplicando as funções "piso" e "aleatório" da biblioteca matemática. Qualquer que seja o valor do “piso”, ele seria usado para obter a cor aleatória do índice específico desta matriz. O ID "Pick" do Heading 2 para este arquivo HTML foi usado para obter o ID e salvo na variável "X". Depois disso, o atributo de estilo "cor" foi aplicado à variável "x" para colorir aleatoriamente 2 usando a variável "random_color". É isso sobre este código. Vamos salvá -lo e executá -lo com o menu "Run".

A saída no navegador Chrome é mostrada na imagem a seguir. Ele mostra dois títulos seguidos por um botão simples. O primeiro cabeçalho é estático, enquanto o segundo título foi usado para alterar aleatoriamente sua cor sempre que um usuário toca no botão.

Antes de tocar no botão, a cor do cabeçalho era vermelha. Depois de tocar nele, acontece como mostrado abaixo, eu.e., laranja claro:

Novamente tocando no botão, a cor do cabeçalho fica amarela.

Tocar no botão mais uma vez muda a cor do caminho para o verde.

Assim, cada toque no botão mudaria aleatoriamente a cor de um título, eu.e., Azul, verde, amarelo, etc.

Exemplo # 02

Vamos começar com o exemplo avançado de alterar aleatoriamente a cor de algum elemento do arquivo html. Criamos um arquivo HTML que alterará aleatoriamente a cor de alguns títulos após cada segundo sem usar nenhum botão ou tocar na seção. Além disso, criaremos uma seção aleatória de “div” e preenchê -la com qualquer cor aleatória ao clicar em qualquer área da página HTML. Sugerimos que você leia a explicação para a tag "Body" primeiro e depois passe por esta seção da explicação da página HTML. O arquivo HTML começou com a tag de estilo para colorir os diferentes elementos HTML nesta página da web. O ID “#Color” foi usado para definir a largura e a altura da entrada “menor” “div” para 10em e 6em, respectivamente. A tabela 1, o cabeçalho 4 e a família de fontes de parágrafo foram definidas como sans-serif. O texto foi alinhado ao centro. Enquanto a classe "Box" foi especificada para definir a largura, altura, alinhamento-itens e propriedade de conteúdo justificado para a segunda seção "div" para 100%, 33VH, centro e centro, respectivamente. O estilo foi feito aqui:

'

Dentro do código JavaScript deste arquivo, chamamos a função "setInterval", passando por ele de uma cor aleatória com a ajuda de uma função "setColor" após cada milissegundo. A função "SetColor" tem tomado a cor aleatória usando a função "RandomeHexadeCimalColorstring ()", obtendo o ID da primeira seção "div" e aplicando a cor aleatória na "div" em particular. A função "ChangeColor" foi usada aqui para criar uma variedade de cores e escolher aleatoriamente uma cor de sua matriz por um método "piso".

Isso seria aplicado à seção interna de “div” do segundo elemento “div” do corpo para alterar aleatoriamente a cor de uma caixa “div”. A função “rgbcolor” foi usada para inicializar o valor para cores vermelhas, verdes e azuis enquanto usava a função anterior “RandomNumber”.

º RandomHexadeCimalColorstring () A função seria obter o valor para a combinação vermelha, verde e azul usando a função "tostring" e "padstart" e retornar à sua função de chamada. O ChangeColorrandomly () função está novamente usando o RandomHexadeCimalColorstring () função para alterar a cor de uma caixa de acordo com o número de cores especificado pelo ID "Texto". A função "ClickHandler" é usada para alterar aleatoriamente a cor de uma caixa quando clicada em qualquer lugar da seção.

A tag HTML "Body" contém o estilo em linha para alinhar o texto. Ele contém o centro através do uso da propriedade "Alinhamento de texto". Temos dois elementos principais “div” para dividir a página em 2 seções. O primeiro contém o ID "Auto" para diferenciação, enquanto o outro contém a classe "caixa". A primeira seção "Div" contém apenas um título único do tamanho 1 com seu título de título exclusivo. A outra seção "Div" contém outro "div" que tem usado o elemento HTML "P" para adicionar o parágrafo de 1 linha e o elemento de tag "entrada" para obter o ID de cores como entrada e alterar a cor deste "Div" de acordo com isso.

Junto com isso, o cabeçalho H4 desta seção "Div" usaria o ID "Texto" para alterar aleatoriamente o número de cores a cada clique na página HTML. Vamos salvar e executar o seguinte código:

O primeiro título mudaria sua cor após cada milissegundo. Ao clicar na segunda seção "div" da página html, a caixa também mudará sua cor aleatoriamente.

Conclusão

Trata -se de usar técnicas simples para alterar aleatoriamente a cor de alguns elementos HTML sem trabalho duro. Em nossos exemplos, tentamos cobrir o uso da função "PickColor" para escolher aleatoriamente uma cor de uma matriz e aplicá -la ao elemento específico. Temos tentado implementar a função setInterval () para alterar instantaneamente a cor de um elemento específico sem tocar em algum lugar na tela HTML, eu.e., mudança de cor automática.