HOWTO · jQuery
jQuery를 난수
이 튜토리얼은 jQuery를 사용하여 난수를 생성하는 방법을 보여줍니다.
이 페이지의 내용
이 튜토리얼은 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를 사용하여 범위 사이에 난수를 생성해 보겠습니다. 이를 위해서는 다음 공식을 사용해야 합니다.
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 사이의 난수를 생성합니다. 출력을 참조하십시오.
