Genere un número aleatorio | Programar Plus

Para los dos últimos sorteos de libros que hice, prometí que elegiría un ganador totalmente al azar de los comentarios. Hubo cientos de comentarios, así que no estaba dispuesto a escribir los números en pequeños trozos de papel y sacarlos de un sombrero. De hecho, tengo una aplicación de iPhone para tirar dados que iba a usar, pero luego pensé qué diablos podría construir una pequeña página web para hacerlo rápido.

Moví la demostración de esta publicación a este CodePen, que es mucho más práctico, aunque un poco de la vieja escuela con jQuery y todo. El resto del post lo dejaré prácticamente intacto.

Aquí hay una versión sin jQuery …

Número aleatorio de JavaScript

Generar un número aleatorio con JavaScript es bastante sencillo:

var numRand = Math.floor(Math.random() * 101);

Eso devolverá un número aleatorio entre 1-100. Pero quería que este sitio web fuera un poco más útil, ya que tomaría un valor bajo y alto y devolvería un número aleatorio entre esos dos valores.

HTML

Un par de entradas de texto, un “¡Generar!” y un contenedor div vacío para pegar el número servirá:

<input type="text" id="lownumber" value="1" />
and
<input type="text" id="highnumber" value="100" />

<br />

<input type="submit" id="getit" value="Generate!" />

<div id="randomnumber"></div>

jQuery

Cuando el mensaje “Generate!” se hace clic en el botón, haremos el trabajo:

$("#getit").click(function() {
    
        var numLow = $("#lownumber").val();
        var numHigh = $("#highnumber").val();
        
        var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
        
        var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
        
        if ((IsNumeric(numLow)) && (IsNumeric(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh) && (numLow != '') && (numHigh != '')) {
            $("#randomnumber").text(numRand);
        } else {
            $("#randomnumber").text("Careful now...");
        }
        
        return false;
});

La forma más fácil en la que pensé fue restar el mínimo del máximo, generar un número aleatorio entre 1 y ese, y luego agregar el mínimo. Para asegurarnos de que funcionó, debemos verificar una variedad de cosas:

  • Las entradas no están en blanco y son números
  • El primer número es menor que el segundo

Usé esta función IsNumeric clásica para verificar si en realidad eran números: Función IsNumeric actualizada (10 veces más fácil) gracias a James:

function isNumeric(n){
  return !isNaN(n);
}

Como toque final, quería tener los números predeterminados 1 y 100 allí, pero que sean fáciles de cambiar. Entonces, tan pronto como presiona o hace clic en cualquiera de los elementos, borra el número y cambia el color a negro. También asegura que si presiona o hace clic allí OTRA VEZ, NO hará eso.

$("input[type=text]").each(function(){
    $(this).data("first-click", true);
});

$("input[type=text]").focus(function(){
   
    if ($(this).data("first-click")) {
        $(this).val("");
        $(this).data("first-click", false);
        $(this).css("color", "black");
    }
    
});
(Visited 2 times, 1 visits today)