Número aleatorio de jQuery
Este tutorial demuestra cómo generar números aleatorios usando jQuery.
Generar número aleatorio en jQuery
jQuery no proporciona un método incorporado para generar números aleatorios, pero podemos usar el método Math.random() de JavaScript para generar números aleatorios usando jQuery.
El método Math.random() generará cualquier número sin tomar un parámetro; la sintaxis para este método se encuentra a continuación.
var RandomNumber = Math.random();
Ahora usemos jQuery con el método Math.random() para generar un número aleatorio en cada clic. Ver el ejemplo:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Random Number</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#Random {
background-color : lightgreen;
height: 10%;
width: 20%;
}
#ClickHere {
border: 5px solid green;
background-color : lightgreen;
height: 10%;
width: 20%;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<div class="html-code-output">
<div id="div1">
<h2 id="ClickHere">Click here to Generate random number</h2>
<p>The generated random number is: <h1 id="Random"></h1></p>
</div>
</div>
<script>
$("#ClickHere").click(function(){
$("#Random").text(Math.round(Math.random()*100));
});
</script>
</body>
</html>
El código anterior generará un número aleatorio en cada clic. Ver la salida:
Número aleatorio de jQuery entre un rango
Ahora intentemos generar números aleatorios entre rangos usando jQuery; para ese propósito, necesitamos usar la siguiente fórmula.
Math.round(Math.random() * difference + startnumber)
Arriba, la diferencia es la diferencia entre el final del rango y el inicio del rango; probemos un ejemplo.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Random Number</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#Click {
background-color : lightgreen;
height: 50%;
width: 100%;
}
#Main {
border: 5px solid green;
background-color : lightgreen;
height: 10%;
width: 20%;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<div id="Main">
<label for="RangeStart">1st Number</label>
<input type="number" id="RangeStart" value="0" />
<br></br>
<label for="RangeEnd">2nd Number</label>
<input type="number" id="RangeEnd" value="100" />
<h2 id="Click">Click here to Generate Random Numbers</h2>
<h3> The random number between the 0 to 100 are: </h3>
<ul>
<li id="RandomNumber1"></li>
<li id="RandomNumber2"></li>
<li id="RandomNumber3"></li>
<li id="RandomNumber4"></li>
<li id="RandomNumber5"></li>
</ul>
</div>
<script>
$("#Click").click(function(){
var number1 = Number($("#RangeStart").val());
var number2 = Number($("#RangeEnd").val());
var start, end;
var difference = Math.abs(number2 - number1);
if (number2 > number1) {
startnumber = number1;
endnumber = number2;
} else {
startnumber = number2;
endnumber = number1;
}
$("#RandomNumber1").text(Math.round(Math.random() * difference + startnumber));
$("#RandomNumber2").text(Math.round(Math.random() * difference + startnumber));
$("#RandomNumber3").text(Math.round(Math.random() * difference + startnumber));
$("#RandomNumber4").text(Math.round(Math.random() * difference + startnumber));
$("#RandomNumber5").text(Math.round(Math.random() * difference + startnumber));
});
</script>
</body>
</html>
El código anterior genera números aleatorios entre el rango de 0 a 100. Vea el resultado:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook