Hoy te quiero compartir una herramienta en línea para generar números aleatorios directamente en el navegador web. Puedes especificar el límite inferior, límite superior y cantidad de números aleatorios que quieres generar.
También puedes especificar el separador de números aleatorios para que sea una coma, un punto, un espacio, un salto de línea o cualquier carácter.
El generador de números aleatorios permite mostrar los números generados o descargarlos en un archivo de texto (extensión txt).
Acceder al generador
La herramienta para generar un archivo con números aleatorios se encuentra en el siguiente enlace: https://parzibyte.github.io/ejemplos-javascript/generar-numeros-aleatorios/
Todo el proceso se hace en el navegador web con JavaScript, incluyendo la generación del archivo. A continuación explicaré el funcionamiento técnico.
Creando generador de números
Para hacer un generador de números aleatorios simplemente hay que concatenar varios números en una cadena y mostrar dicha cadena en el contenedor o colocarla en un archivo.
He usado la función previamente expuesta en mi blog para generar un número aleatorio en un rango:
// Tomado de https://parzibyte.me/blog/2020/08/01/javascript-numero-aleatorio-rango/
const obtenerNumeroAleatorioEnRango = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Después he encerrado el comportamiento en una función que lee los valores de los input
y concatena varios números aleatorios usando el separador y los límites:
const generar = () => {
let resultado = "";
const separador = $separador.value;
const limiteInferior = $limiteInferior.valueAsNumber;
const limiteSuperior = $limiteSuperior.valueAsNumber;
const cantidad = $cantidad.valueAsNumber;
for (let i = 0; i < cantidad; i++) {
resultado += (obtenerNumeroAleatorioEnRango(limiteInferior, limiteSuperior)).toString() + separador;
}
return resultado;
}
En este caso $limiteInferior
, $limiteSuperior
y todas las constantes que inician con el signo de peso son elementos del DOM obtenidos con querySelector.
Después, en el clic del botón simplemente genero los números aleatorios y los muestro en el contenedor modificando su textContent
:
$generarYMostrar.addEventListener("click", () => {
if (!valoresSonValidos()) {
return alert("Rellene todos los campos");
}
$contenedor.textContent = generar();
});
O los guardo en un archivo usando Blob
y genero un enlace para descargarlo:
$generarEnArchivo.addEventListener("click", () => {
if (!valoresSonValidos()) {
return alert("Rellene todos los campos");
}
const a = document.createElement("a");
const archivo = new Blob([generar()], { type: 'text/plain' });
const url = URL.createObjectURL(archivo);
a.href = url;
a.download = `${$cantidad.valueAsNumber} números aleatorios entre ${limiteInferior.valueAsNumber} y ${limiteSuperior.valueAsNumber}.txt`;
a.click();
URL.revokeObjectURL(url);
});
Así como se ve en la siguiente imagen:
El código HTML, JavaScript y CSS completos están en el repositorio de GitHub, ya que aquí solo he mostrado las partes más importantes: https://github.com/parzibyte/ejemplos-javascript/tree/master/generar-numeros-aleatorios
Recuerda que puedes acceder al generador en: https://parzibyte.github.io/ejemplos-javascript/generar-numeros-aleatorios/