Gerador de cores aleatórias – JavaScript

Este tutorial demonstrará o procedimento para geração de cores aleatórias em JavaScript.

Como gerar cores aleatórias em JavaScript?

Para gerar cores aleatórias em JavaScript, utilize o “ Math.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 Cor Aleatória
Em um arquivo HTML, vamos criar um container e adicionar um elemento que gera as cores aleatórias no clique do botão:

< ID do span = 'colorContainer' >
< ID do botão = 'btn' > Clique para gerar cores aleatórias botão >
período >

Agora, adicione o código abaixo no arquivo JavaScript ou na tag

---

• Primeiro, definimos uma função “ colorGenerator() ” onde criamos um “ hexDigits ” matriz de números hexadecimais de 0 a 9 e A a F.
• Crie uma variável “ Código de cores ”.
• Em seguida, usando o “ para ” loop, em cada iteração, os métodos do “ Matemática ” O objeto gera um número aleatório entre 0 e 16.
• Passe o número do índice resultante para “hexDigits” e armazene o valor do índice correspondente na variável “colorCode”.
• O processo será repetido 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() ” no evento click do botão. Chame a função definida “ colorGenerator() ” para alterar a cor de fundo de todo o corpo:

btn. addEventListener ( 'clique' , ( ) => {
documento. corpo . estilo . cor de fundo = gerador de cores ( ) ;
} ) ;

Saída

Exemplo 2: gerar cor aleatória com código
Aqui, imprimiremos o código de cor gerado aleatoriamente correspondente com a cor usando o “ HTML interno ' propriedade:

btn. addEventListener ( 'clique' , ( ) => {
documento. corpo . estilo . cor de fundo = gerador de cores ( ) ;
documento. getElementById ( 'Código de cores' ) . HTML interno = gerador de cores ( ) ;
} ) ;

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

Isso foi tudo sobre o gerador de cores aleatórias 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. A cada iteração, um dígito de código de cores é gerado e pós-incremento em uma variável. Este código de cor é retornado com “#” no início. Este tutorial demonstrou o procedimento para gerar cores aleatórias em JavaScript.