[HTML5] 로또추첨기 만들기
728x90
반응형
#주의#
이 글은 강의 글이 아닙니다
틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다.
html 파일 만들기
오랜만에 html 코딩 관련하여 글을 작성합니다. 우선 VSCode를 켜서 파일을 하나 만들어줍니다.
lotto.html 로 만듭니다.
html:5작성 하면 아래와 같이 출력됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><head>
head 태그를 아래와 같이 작성해줍니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS 불러오기 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head><body>
부트스트랩 라이브러리를 통해 불러오겠습니다. 다음 body태크에 아래와 같이 작성해주시면 됩니다.
<body class="text-center">
<!-- 로또 섹션 -->
<div class="jumbotron">
<h1 class="display-4">로또 기계</h1>
<p class="lead">아래 버튼을 클릭하여 45개 중 6개의 숫자를 뽑으세요</p>
<!-- 추첨 버튼 -->
<button class="btn btn-primary btn-lg" onclick="drawLottery()">로또 추첨</button>
<!-- 기록 지우기 버튼 -->
<button class="btn btn-danger btn-lg" onclick="eraseHistory()">기록 지우기</button>
</div>
<!-- 결과 표시 -->
<div class="alert alert-primary" role="alert" id="resultSection"></div>
<!-- 기록 표시 -->
<div class="alert alert-secondary" role="alert" id="historySection"></div><script>
여기서 body태그를 닫아주지 않은 이유는 html 하나에 js까지 포함하여 작성하기 위해 이렇게 합니다. js파일을 따로 만들어도 되지만, 이렇게 간단하고 짧은 웹페이지를 만들때는 굳이 나눌 필요는 없기 때문입니다. 바로 아래에 script를 작성합니다.
<script>
// 로또 추첨 함수
function drawLottery() {
// 1과 45 사이의 유일한 무작위 숫자 6개를 추출
let drawnNumbers = [];
for (let i = 0; i < 6; i++) {
let number;
do {
number = Math.floor(Math.random() * 45) + 1;
} while (drawnNumbers.includes(number));
drawnNumbers.push(number);
}
// 숫자를 낮은 순으로 정렬
drawnNumbers.sort((a, b) => a - b);
// 결과를 표시
let resultSection = document.getElementById('resultSection');
resultSection.innerHTML = '뽑힌 숫자들: ' + drawnNumbers.join(', ');
// 추첨된 숫자를 기록
let historySection = document.getElementById('historySection');
historySection.innerHTML += '뽑힌 숫자들: ' + drawnNumbers.join(', ') + '<br>';
}
// 기록 지우기 함수
function eraseHistory() {
let historySection = document.getElementById('historySection');
historySection.innerHTML = '';
}
</script></html>
이해하기 쉽도록 모든 함수에 최대한 주석을 달아두었습니다. 보기 편하실겁니다.
마지막으로 body와 html을 닫아주면 끝입니다.
</body>
</html>전체코드
이렇게 됐을때 전체 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS 불러오기 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="text-center">
<!-- 로또 섹션 -->
<div class="jumbotron">
<h1 class="display-4">로또 기계</h1>
<p class="lead">아래 버튼을 클릭하여 45개 중 6개의 숫자를 뽑으세요</p>
<!-- 추첨 버튼 -->
<button class="btn btn-primary btn-lg" onclick="drawLottery()">로또 추첨</button>
<!-- 기록 지우기 버튼 -->
<button class="btn btn-danger btn-lg" onclick="eraseHistory()">기록 지우기</button>
</div>
<!-- 결과 표시 -->
<div class="alert alert-primary" role="alert" id="resultSection"></div>
<!-- 기록 표시 -->
<div class="alert alert-secondary" role="alert" id="historySection"></div>
<script>
// 로또 추첨 함수
function drawLottery() {
// 1과 45 사이의 유일한 무작위 숫자 6개를 추출
let drawnNumbers = [];
for (let i = 0; i < 6; i++) {
let number;
do {
number = Math.floor(Math.random() * 45) + 1;
} while (drawnNumbers.includes(number));
drawnNumbers.push(number);
}
// 숫자를 낮은 순으로 정렬
drawnNumbers.sort((a, b) => a - b);
// 결과를 표시
let resultSection = document.getElementById('resultSection');
resultSection.innerHTML = '뽑힌 숫자들: ' + drawnNumbers.join(', ');
// 추첨된 숫자를 기록
let historySection = document.getElementById('historySection');
historySection.innerHTML += '뽑힌 숫자들: ' + drawnNumbers.join(', ') + '<br>';
}
// 기록 지우기 함수
function eraseHistory() {
let historySection = document.getElementById('historySection');
historySection.innerHTML = '';
}
</script>
</body>
</html>처음 이 코드를 작성할 때 뽑힌 숫자들을 작은 숫자부터 나타나지 않아서 잠시 헷갈렸는데 금방 해결했습니다. 위에 보시면 이와 같은 주석이 있습니다. // 숫자를 낮은 순으로 정렬
만약 숫자를 낮은 순으로 정렬하고 싶지 않다면 저 부분을 지우면 됩니다.
완성된 웹페이지
이렇게 해서 만들어진 웹 페이지는 아래 사진과 같습니다.
만약 계속 로또 추첨 버튼을 누른다면 아래와 같이 기록됩니다.
만약 이 숫자들이 마음에 들지 않는다면 기록 지우기 버튼을 눌러 모두 지울 수 있습니다.
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] 웹 메모장 만드는 법 (폰트 색상 선택 기능 추가하기) (16) | 2023.05.26 |
|---|---|
| [HTML5] 웹 메모장 만드는 법 (버튼 깔끔하게 배치하기) (2) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (정렬 기능 추가하기) (2) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (폰트 크기 조절 기능 추가하기) (4) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (폰트 선택 기능 추가하기) (2) | 2023.05.26 |
댓글