HOWTO · jQuery
jQuery乱数
このチュートリアルでは、jQuery を使用して乱数を生成する方法を示します。
このページの内容
このチュートリアルでは、jQuery を使用して乱数を生成する方法を示します。
jQueryで乱数を生成する
jQuery には乱数を生成する組み込みメソッドはありませんが、JavaScript の Math.random() メソッドを使用して、jQuery を使用して乱数を生成できます。
Math.random() メソッドは、パラメーターを取らずに任意の数値を生成します。 このメソッドの構文は次のとおりです。
var RandomNumber = Math.random();
次に、jQuery を Math.random() メソッドで使用して、クリックごとに乱数を生成しましょう。 例を参照してください。
<!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>
上記のコードは、クリックごとに乱数を生成します。 出力を参照してください。
範囲内のjQuery乱数
ここで、jQuery を使用して範囲間の乱数を生成してみましょう。 そのためには、次の式を使用する必要があります。
Math.round(Math.random() * difference + startnumber)
上記の difference は範囲の終わりと範囲の始まりの差です。 例を試してみましょう。
<!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>
上記のコードは、0 から 100 の範囲の乱数を生成します。出力を参照してください。
