Gerador de cores aleatório - javascript

Enquanto desenvolvem sites, os desenvolvedores podem precisar gerar cores aleatórias dinamicamente usando JavaScript. É usado no estilo de página da web, visualizações de dados, geração de esquemas de cores, desenvolvimento de jogos e muito mais. Por exemplo, os desenvolvedores criam efeitos visuais, como explosões ou efeitos de partículas nos jogos, diferenciam entre diferentes pontos de dados ou categorias na visualização de dados e assim.

Este tutorial demonstrará o procedimento para gerar cores aleatórias em JavaScript.

Como gerar cores aleatórias em javascript?

Para gerar cores aleatórias em JavaScript, utilize o “Matemática.Random ()*16”Método que cria um número aleatório entre 0 e 16. Isso ocorre porque é uma maneira de gerar um valor hexadecimal aleatório, que pode ser usado para criar uma cor aleatória.

Exemplo 1: gerar cores aleatórias
Em um arquivo HTML, criaremos um contêiner e adicionaremos um elemento que gera as cores aleatórias no botão Clique:

= "ColorContainer">
Clique para gerar cores aleatórias

Agora, adicione o código abaixo do arquivo JavaScript ou tag:

função 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ática.piso (matemática.aleatoriamente ()*16)];

retornar '#$ colorcode'

No trecho de código acima:

• Primeiro, definimos uma função “ColorGenerator ()"Onde criamos um"hexdigits”Array de números hexadecimais de 0 a 9 e A a F.
• Crie uma variável “Código de cores”.
• Então, usando o “para”Loop, em todas as iterações, os métodos do“Matemática”Objeto gera um número aleatório entre 0 e 16.
• Passe o número do índice resultante para os "hexdigits" e armazene o valor do índice correspondente na variável "Código de cores".
• O processo se repetirá 6 vezes para criar um código de 6 dígitos.
• Finalmente, adicione este código com o “#”Assine e retorne à função.

Agora, anexe o “addEventListener ()”Método no evento de clique do botão. Chame a função definida “ColorGenerator ()”Para alterar a cor de fundo de todo o corpo:

btn.addEventListener ('click', () =>
documento.corpo.estilo.BackgroundColor = ColorGenerator ();
);

Saída

Exemplo 2: gerar cores aleatórias com código
Aqui, imprimiremos o código de cores gerado aleatoriamente correspondente com a cor usando o “Innerhtml" propriedade:

btn.addEventListener ('click', () =>
documento.corpo.estilo.BackgroundColor = ColorGenerator ();
documento.getElementById ("COLORCODE").inerhtml = colorGenerator ();
);

A saída mostra o código de cores correspondente com a cor de fundo relevante do corpo:

Isso foi tudo sobre o gerador de cores aleatório em JavaScript.

Conclusão

Para gerar cores aleatórias em JavaScript, crie um código de 6 dígitos usando “Matemática”Métodos de objeto no“para" laço. Em cada iteração, um dígito de código de cores é gerado e pós-incremento em uma variável. Este código de cores é retornado com "#" no começo. Este tutorial demonstrou o procedimento para gerar cores aleatórias em JavaScript.