반응형
[JavaScript] 자바스크립트로 로또 번호 추첨기 만드는 방법 !!
랜덤으로 6자리 번호를 추천해주는 로또 번호 추첨 코드 입니다 :)
예제코드
<!DOCTYPE html>
<html>
<head>
<title>로또 번호 추첨기</title>
</head>
<style>
h1 {
text-align: center;
color: #3f51b5;
font-size: 3rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
p {
text-align: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
button {
display: block;
margin: 0 auto;
padding: 1rem 2rem;
font-size: 1.5rem;
background-color: #3f51b5;
color: #fff;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
button:hover {
background-color: #303f9f;
}
#numbers {
text-align: center;
font-size: 1.5rem;
margin-top: 2rem;
}
</style>
<body>
<h1>로또 번호 추첨기</h1>
<p>클릭해서 번호를 추첨하세요.</p>
<button onclick="pickNumbers()">번호 추첨</button>
<p id="numbers"></p>
<script>
function pickNumbers() {
var numbers = [];
while (numbers.length < 6) {
var randomNumber = Math.floor(Math.random() * 45) + 1;
if (numbers.indexOf(randomNumber) === -1) {
numbers.push(randomNumber);
}
}
var numbersElement = document.getElementById("numbers");
numbersElement.innerHTML = "추첨된 번호: ";
numbersElement.classList.remove("show");
var i = 0;
var intervalId = setInterval(function() {
if (i === numbers.length) {
clearInterval(intervalId);
numbersElement.classList.add("show");
return;
}
numbersElement.innerHTML += numbers[i++] + " ";
}, 500);
}
</script>
</body>
</html>결과값
로또 번호 추첨기
클릭해서 번호를 추첨하세요.
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript & jQuery] 제이쿼리 사용하여 input 텍스트 박스 placeholder 변경하는 방법 !! (0) | 2023.06.09 |
|---|---|
| [JavaScript & jQuery] html에서 이미지 변경 시 사라졌다 나타나는 효과(fadeIn & fadeOut) (0) | 2023.06.08 |
| [JavaScript & jQuery] 자바스크립트를 활용하여 수학 수식 편집기 만드는 방법 !! (0) | 2023.05.16 |
| [JavaScript] 자바스크립트로 .ini 파일 읽기 & 불러오기 방법 !! (0) | 2023.05.09 |
| [JavaScript & jQuery] 제이쿼리를 사용하여 img 태그 src 변경하는 방법 !! (0) | 2023.05.08 |
댓글