반응형
문제
아래와 같은 경품과 확률이 있습니다.
화면에 버튼을 누르면 아래와 같은 확률로 경품이 화면에 출력되는 코드를 작성하시오.
단 경품 추첨 버튼은 한번만 클릭이 가능합니다.
| 경품 | 확률 |
| iMAC PRO | 5% |
| MAC BOOK PRO | 15% |
| iPAD PRO | 30% |
| 다음 기회에 | 50% |
해법
1. body에 form을 생성합니다.
<body>
<fieldset>
<legend>경품 뽑기</legend>
<table id="id_table">
<thead>
<tr>
<th colspan="2">경품 목록</th>
</tr>
</thead>
<tbody>
<tr>
<td>1등</td> <td>iMAC PRO</td>
</tr>
<tr>
<td>2등</td> <td>MAC BOOK PRO</td>
</tr>
<tr>
<td>3등</td> <td>iPAD PRO </td>
</tr>
</tbody>
</table> <br>
<input type="button" value="경품 추첨" id="id_btn">
</fieldset>
<fieldset>
<legend>결과</legend>
<h1 id="id_out"></h1>
</fieldset>
</body>
2. 경품을 리턴하는 함수를 작성합니다.
const getPrize = function() {
//랜덤값 생성 (1~100)
const ranNum = Math.floor((Math.random() * 99) +1)
//경품 생성
const gift = ['1등 iMAC PRO', '2등 MAC BOOK PRO', '3등 iPAD', '다음기회에']
//확률 생성
const pbt = [5, 15, 30, 50]
//리턴 경품 값
let res = ''
for (let i = 0; i < gift.length; i++) {
if(pbt[i] >= ranNum){
res = gift[i]
return res
}
else if (pbt[pbt.length - 1] < ranNum) {
res = gift[gift.length - 1]
return res
}
}
}
3. document에 form의 정보를 가져옵니다.
document.addEventListener('DOMContentLoaded', () => {
const btnTag = document.querySelector('#id_btn')
const outTag = document.querySelector('#id_out')
})
4. 경품 추첨 버튼 이벤트를 생성합니다.
- 버튼은 한번만 클릭이 가능합니다.
btnTag.addEventListener('click', (event) => {
const result = getPrize()
outTag.textContent = `축하합니다! ${result}`
btnTag.disabled = true;
})
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table, th, td {
border: 2px solid black;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const btnTag = document.querySelector('#id_btn')
const outTag = document.querySelector('#id_out')
btnTag.addEventListener('click', (event) => {
const result = getPrize()
outTag.textContent = `축하합니다! ${result}`
btnTag.disabled = true;
})
})
const getPrize = function() {
//랜덤값 생성 (1~100)
const ranNum = Math.floor((Math.random() * 99) +1)
//경품 생성
const gift = ['1등 iMAC PRO', '2등 MAC BOOK PRO', '3등 iPAD', '다음기회에']
//확률 생성
const pbt = [5, 15, 30, 50]
//리턴 경품 값
let res = ''
for (let i = 0; i < gift.length; i++) {
if(pbt[i] >= ranNum){
res = gift[i]
return res
}
else if (pbt[pbt.length - 1] < ranNum) {
res = gift[gift.length - 1]
return res
}
}
}
</script>
</head>
<body>
<fieldset>
<legend>경품 뽑기</legend>
<table id="id_table">
<thead>
<tr>
<th colspan="2">경품 목록</th>
</tr>
</thead>
<tbody>
<tr>
<td>1등</td> <td>iMAC PRO</td>
</tr>
<tr>
<td>2등</td> <td>MAC BOOK PRO</td>
</tr>
<tr>
<td>3등</td> <td>iPAD PRO </td>
</tr>
</tbody>
</table> <br>
<input type="button" value="경품 추첨" id="id_btn">
</fieldset>
<fieldset>
<legend>결과</legend>
<h1 id="id_out"></h1>
</fieldset>
</body>
</html>
반응형
'JavaScript' 카테고리의 다른 글
| [Python] Segmentation (0) | 2022.10.06 |
|---|---|
| [JavaScript] 요소 비활성화하기 (0) | 2022.05.05 |
| [JavaScript] UI 설계 예제 (0) | 2022.05.04 |
| [JavaScript] checkbox 전체 설정하기 (0) | 2022.05.02 |
| [JavaScript] 과일 상자 추가하기 (table 추가 예제) (0) | 2022.05.02 |