If at first you don't succeed, try again

[Javascript] 이벤트 당첨자 뽑기 프로그램 본문

HTML, CSS, Javascript

[Javascript] 이벤트 당첨자 뽑기 프로그램

웅지니어링 2021. 8. 10. 16:11

프로그램을 만들기 전에 먼저 무작위로 숫자를 추출하는 random() 메서드부터 알아보겠다.

Math.random()

콘솔 창에 위의 코드를 입력하면

위와 같이 0 ~ 1사이의 숫자가 소수점 단위로 무작위 출력되는 것을 확인할 수 있다.

 

이번에는 1과 100 사이의 숫자를 무작위로 출력해보겠다.

Math.random() * 100 + 1

Math.random() 메서드를 실행한 값에 100을 곱하면 대략 0.000 ~ 99.999사이의 값이 된다. 따라서 이 계산값에 1을

더해주면 1과 100 사이의 숫자가 출력될 것이다.

정상적으로 출력되는 것을 볼 수 있다.

만약에 무작위로 추출되는 숫자를 정수로만 나타내고 싶다면 Math 객체의 floor() 메서드를 사용해주면 된다.

Math.floor(Math.random() * 100  + 1)

그럼 이제 프로그램을 완성하기 위해 코드를 작성하겠다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
      h1 {
        border:1px solid black;
        padding:10px;
        background:#eee;
      }
</style>
</head>
<body>
<h1>당첨자 발표</h1>
<script>
var seed = prompt("전체 응모자 수 : ", ""); // 응모자 수 입력받기
var picked = Math.floor(Math.random() * seed + 1); // 무작위 수 뽑기

document.write("전체 응모자 수 : " + seed + "명");
document.write("<br>");
document.write("당첨자 : " + picked + "번");
</script>
</body>
</html>

웹 브라우저에서 결과를 출력해보면

입력된 응모자 수에 대하여 무작위로 잘 추출되고 있음을 확인할 수 있다.

'HTML, CSS, Javascript' 카테고리의 다른 글

[Javascript] DOM 요소에 접근하고 속성 가져오기  (0) 2021.08.19
[Javascript] window 객체의 메서드  (0) 2021.08.16
[Javascript] Math 객체의 메서드  (0) 2021.08.10
[Javascript] 날짜 계산하는 프로그램 만들기  (0) 2021.08.07
[Javascript] Date 객체의 메서드  (0) 2021.08.07
'HTML, CSS, Javascript' Related Articles more