Generar color aleatorio en JavaScript
-
Usando
Math.floor(Math.random())para generar un color aleatorio usando JavaScript en HTML - Forma alternativa de obtener un resultado de color aleatorio en JavaScript
Este artículo discutirá el uso de las funciones matemáticas integradas de JavaScript y la biblioteca JQuery para UI (interfaz de usuario) para cambiar el color de fondo de la página web HTML onClick aleatoriamente mediante un ejemplo. Usando funciones matemáticas, podemos obtener fácilmente los valores redondeados como piso y techo, y podemos obtener un valor aleatorio usando math.random().
Usando Math.floor(Math.random()) para generar un color aleatorio usando JavaScript en HTML
El método getRandomColor se activa cada vez que el usuario presiona el botón Change background color. Ese método usa JQuery para asignar estilos CSS a nuestra etiqueta de cuerpo de la página web HTML que cambiará el color de fondo.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random colors</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body id ="bodyId" >
<Div style="text-align: center; width: 100%;">
<H1>Generate Random Color using JavaScript/jquery</H1>
<button onclick="getRandomColor()">Change background color</button>
</Div>
</body>
<script>
//The ColorCode() will give the code every time.
function ColorCode() {
var makingColorCode = '0123456789ABCDEF';
var finalCode = '#';
for (var counter = 0; counter < 6; counter++) {
finalCode =finalCode+ makingColorCode[Math.floor(Math.random() * 16)];
}
return finalCode;
}
//Function calling on button click.
function getRandomColor() {
$("#bodyId").css("background-color", ColorCode());
}
</script>
</html>
En la fuente de la página HTML anterior, puede ver los enlaces de JQuery en las etiquetas <script> que son necesarios para usar las bibliotecas de JQuery en doctype html. En el siguiente paso, la función getRandomColor() se declara dentro de la etiqueta <script> dentro de otra función llamada function ColorCode() que asigna un estilo CSS con la propiedad background-color.
La función ColorCode() contiene una cadena de valores decimales hexadecimales en secuencia (0-F) utilizamos un bucle for para ejecutar las declaraciones de código hasta que la condición dada sea verdadera. En este caso, la condición a cumplir es var counter = 0; counter < 6; counter++.
Ese bucle generará una cadena finalCode concatenando valores aleatorios con una longitud de # de 6, luego devolvemos esa cadena finalCode y la usamos como atributo de color.
Examinar el código HTML dado
Siga estos cuatro sencillos pasos para comprender el método getRandomColor.
-
Crea un documento de texto. Puede utilizar el bloc de notas o cualquier otra herramienta de edición de texto.
-
Pega el código dado en el archivo de texto creado.
-
Guarda ese archivo de texto con la extensión
.htmly ábrelo con cualquier navegador predeterminado. -
Puedes ver el botón
Change background color. Con ese botón, puede cambiar el color de fondo de forma aleatoria.
Forma alternativa de obtener un resultado de color aleatorio en JavaScript
También puede lograr la selección de color aleatoria en JavaScript utilizando una sola línea de código, como se muestra a continuación. Minimiza la longitud del código para ahorrar tiempo / memoria y dar resultados eficientes.
function generateRandomCode() {
var myRandomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
return myRandomColor;
}
// will generate any random color
En ambos ejemplos, generateRandomCode() y ColorCode() devolverán una cadena de colores aleatorios utilizando el método incorporado de javaScript Math.random() con una combinación de 6 valores de longitud.