jQuery-Zufallszahl
Dieses Tutorial zeigt, wie Sie mit jQuery Zufallszahlen generieren.
Generieren Sie Zufallszahlen in jQuery
jQuery bietet keine eingebaute Methode zum Generieren von Zufallszahlen, aber wir können die Methode Math.random() von JavaScript verwenden, um Zufallszahlen mit jQuery zu generieren.
Die Methode Math.random() generiert eine beliebige Zahl, ohne einen Parameter zu übernehmen; Die Syntax für diese Methode ist unten.
var RandomNumber = Math.random();
Lassen Sie uns nun jQuery mit der Methode Math.random() verwenden, um bei jedem Klick eine Zufallszahl zu generieren. Siehe das Beispiel:
<!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>
Der obige Code generiert bei jedem Klick eine Zufallszahl. Siehe die Ausgabe:
jQuery Zufallszahl zwischen einem Bereich
Versuchen wir nun, mit jQuery Zufallszahlen zwischen Bereichen zu generieren. Zu diesem Zweck müssen wir die folgende Formel verwenden.
Math.round(Math.random() * difference + startnumber)
Oben ist die Differenz die Differenz zwischen dem Ende des Bereichs und dem Anfang des Bereichs; Versuchen wir es an einem Beispiel.
<!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>
Der obige Code generiert Zufallszahlen im Bereich von 0 bis 100. Siehe die Ausgabe:
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