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");
}
});