jQuery乱数

Sheeraz Gul 2024年2月15日

jQuery jQuery Random

このチュートリアルでは、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乱数

ここで、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 の範囲の乱数を生成します。出力を参照してください。

jQuery乱数範囲

著者： Sheeraz Gul

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