Generador de números aleatorios online

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/posts/javascript-numero-aleatorio-rango/](https://parzibyte.me/blog/posts/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/

Y por aquí puedes aprender más de JavaScript.