jQuery를 난수

Sheeraz Gul 2024년2월15일

jQuery jQuery Random

이 튜토리얼은 jQuery를 사용하여 난수를 생성하는 방법을 보여줍니다.

jQuery에서 난수 생성

jQuery는 난수를 생성하는 내장 메서드를 제공하지 않지만 JavaScript의 Math.random() 메서드를 사용하여 jQuery를 사용하여 난수를 생성할 수 있습니다.

Math.random() 메서드는 매개변수를 사용하지 않고 숫자를 생성합니다. 이 방법의 구문은 다음과 같습니다.

var RandomNumber = Math.random();

이제 Math.random() 메서드와 함께 jQuery를 사용하여 클릭할 때마다 난수를 생성해 보겠습니다. 예를 참조하십시오.

<!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)

위에서 차이는 범위의 끝과 범위의 시작 사이의 차이입니다. 예를 들어 보겠습니다.

<!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