오늘은 학원에서 내 준 과제로, 자바스크립트를 이용하여 로또 당첨 알고리즘을 만들어 보겠습니다!
부가적인 설명 없이 코드와 결과를 기재하겠습니다.
먼저 html 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업 지시서3</title>
<style>
body{
width: 1200px;
margin: auto;
}
.select{
padding: 15px 15px;
margin-top: 20px;
margin-left: 30px;
background-color: lightcoral;
color: white;
font-weight: bolder;
font-size: 20px;
}
.result{
padding: 20px 20px;
margin-top: 60px;
margin-left: 250px;
background-color: skyblue;
color: black;
font-weight: bolder;
font-size: 20px;
}
</style>
</head>
<body>
<h1>당신의 번호는?</h1>
<img style="width: 100px; height: 100px;" id="my_num1" src="resources/images/ball_1.png">
<img style="width: 100px; height: 100px;" id="my_num2" src="resources/images/ball_2.png">
<img style="width: 100px; height: 100px;" id="my_num3" src="resources/images/ball_3.png">
<img style="width: 100px; height: 100px;" id="my_num4" src="resources/images/ball_4.png">
<img style="width: 100px; height: 100px;" id="my_num5" src="resources/images/ball_5.png">
<img style="width: 100px; height: 100px;" id="my_num6" src="resources/images/ball_6.png">
<br><br><br>
<h1>당첨 번호는?</h1>
<div style="float: left;">
<img style="width: 100px; height: 100px;" id="num_img1" src="resources/images/ball_1.png">
<img style="width: 100px; height: 100px;" id="num_img2" src="resources/images/ball_2.png">
<img style="width: 100px; height: 100px;" id="num_img3" src="resources/images/ball_3.png">
<img style="width: 100px; height: 100px;" id="num_img4" src="resources/images/ball_4.png">
<img style="width: 100px; height: 100px;" id="num_img5" src="resources/images/ball_5.png">
<img style="width: 100px; height: 100px;" id="num_img6" src="resources/images/ball_6.png">
</div>
<div style="margin: auto; width: 1300px;">
<input id="change_img_btn1" type="button" value="추첨" class="select">
</div>
<br>
<div style="margin: auto; width: 1300px; clear: left;">
<input id="change_img_btn2" type="button" value="당첨 결과" class="result">
</div>
<br>
<h2 id="out">당신의 결과는?</h2>
<script src="lotto.js"></script>
</body>
</html>
다음은 js 코드입니다.
const changeImgBtn1 = document.getElementById("change_img_btn1");
const changeImgBtn2 = document.getElementById("change_img_btn2");
const outPut = document.getElementById("out");
// 나의 번호 6개(중복 제거 & 숫자 범위 제한)
let arr1 = [];
for (let j = 0; j < 6; ++j) {
let input = prompt("번호를 입력해 주세요!(1 ~ 46)")
if (input < 1 || input > 46){
alert("1~46 범위로 입력하여 주시옵소서.");
j--;
}
else if (arr1.indexOf(input) === -1) {
arr1.push(input);
} else {
j--;
alert("중복된 번호입니다. 다시 입력하여 주시옵소서.")
}
document.getElementById("my_num" + (j + 1)).src = "resources/images/ball_" + arr1[j] + ".png";
}
let num = []; // Global Variable로 가져옴 <- 다음 코드에 계속 사용하기 위함
// 당첨번호 6개(중복 제거)
changeImgBtn1.addEventListener('click', () => {
let arr2 = [];
for (let i = 0; i < 6; ++i) {
randomNum2 = Math.floor(Math.random() * 45) + 1;
if (arr2.indexOf(randomNum2) === -1) {
arr2.push(randomNum2);
} else {
i--;
}
document.getElementById("num_img" + (i + 1)).src = "resources/images/ball_" + arr2[i] + ".png";
}
num = arr2; // Local Variable을 배열 num에 할당
});
// 당첨 결과 버튼 누를 때 해당 결괏값이 출력됨
changeImgBtn2.addEventListener('click', check);
function check() {
let total = 0;
for (j = 0; j < arr1.length; ++j) {
for (i = 0; i < num.length; ++i) {
if (arr1[j] == num[i]) {
++total;
}
}
}
if (total >= 3){
outPut.innerHTML = "축하합니다! 1등입니다.";
}
else if (total == 2){
outPut.innerHTML = "축하합니다! 2등입니다.";
}
else if (total == 1){
outPut.innerHTML = "축하합니다! 3등입니다.";
}
else {
outPut.innerHTML = "꽝입니다. 다음 기회는 없다. 이 식판아 ^^!!!";
}
}
해당 코드로 작성한 기본 화면입니다.
번호를 입력한 다음 추첨 버튼을 클릭한 후, 당첨 결과 버튼을 누르면
이와 같은 결과가 출력되도록 코딩하였습니다.
'Javascript' 카테고리의 다른 글
| 자바스크립트 기초(클래스) (0) | 2022.02.16 |
|---|---|
| 자바스크립트 기초(객체) (0) | 2022.02.16 |
| 자바스크립트 기초(배열) (0) | 2022.02.11 |
| 자바스크립트 기초(함수) (0) | 2022.02.11 |
| 자바스크립트 기초(조건문, 반복문) (0) | 2022.02.10 |
