javascript

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/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();
});
Generar cantidad de números aleatorios y mostrarlos

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:

Crear archivo con números aleatorios en rango con separador

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

5 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.