당첨율 높은 로또 번호 생성기 추가 제작!!

Chat GPT 물어봅시다.

by 기술자놈 2023. 4. 2. 20:18

SMALL

안녕하세요.

#기술자놈 입니다.

오늘은 좀더 퀄리티를 높여서 로또 번호 생성기를 수정해 봤습니다.

시작화면입니다.

이렇게 공이 없어지면서 숫자가 나타납니다.

전부 완료되면 모든 숫자가 보이게 됩니다.

완성된 코드 입니다.

<!DOCTYPE html>
<html>
<head>
<title>로또 번호 생성기</title>
<meta charset="UTF-8">
<style type="text/css">
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-size: 48px;
margin-top: 0;
padding-top: 20px;
color: #333;
}
.container {
margin: 0 auto;
max-width: 600px;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
border-radius: 5px;
}
.btn {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.btn:hover {
background-color: #3e8e41;
}
.result {
margin-top: 20px;
text-align: center;
font-size: 32px;
color: #333;
}
.ball {
display: inline-block;
margin: 0 10px;
width: 50px;
height: 50px;
background-color: #ddd;
border-radius: 50%;
text-align: center;
font-size: 24px;
font-weight: bold;
line-height: 50px;
color: #000;
}
.ball-1 { background-color: {{color1}}; }
.ball-2 { background-color: {{color2}}; }
.ball-3 { background-color: {{color3}}; }
.ball-4 { background-color: {{color4}}; }
.ball-5 { background-color: {{color5}}; }
.ball-6 { background-color: {{color6}}; }
</style>
</head>
<body>
<div class="container">
<h1>로또 번호 생성기</h1>
<button class="btn" onclick="generate_lotto_nums()">번호 생성하기</button>
<div class="result">
<p id="result-msg">당첨번호</p>
<div id="lotto-nums">
<span class="ball ball-1"></span>
<span class="ball ball-2"></span>
<span class="ball ball-3"></span>
<span class="ball ball-4"></span>
<span class="ball ball-5"></span>
<span class="ball ball-6"></span>
</div>
</div>
</div>
<script type="text/javascript">
function generate_lotto_nums() {
var colors = ["#FF5733", "#DAF7A6", "#C70039", "#900C3F", "#00BFFF", "#FFC300"];
var lotto_nums = [];
while (lotto_nums.length < 6) {
var num = Math.floor(Math.random() * 45) + 1;
if (lotto_nums.indexOf(num) === -1) {
lotto_nums.push(num);
}
}
lotto_nums.sort(function(a, b){return a-b});
document.getElementById("result-msg").innerHTML = "당첨번호";
document.getElementById("result-msg").style.fontSize = "150%";
document.querySelectorAll(".ball").forEach(function(ball) {
ball.style.animation = "none";
ball.offsetHeight;
ball.style.animation = null;
ball.style.color = "#000";
ball.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
ball.textContent = "";
});
var index = 0;
var intervalId = setInterval(function() {
document.querySelectorAll(".ball")[index].textContent = lotto_nums[index];
document.querySelectorAll(".ball")[index].style.backgroundColor = "#fff";
document.querySelectorAll(".ball")[index].style.color = "#000";
document.querySelectorAll(".ball")[index].style.fontSize = "40px";
document.querySelectorAll(".ball")[index].style.fontWeight = "bold";
document.querySelectorAll(".ball")[index].style.animation = "blink 0.3s linear 2";
index++;
if (index === 6) {
clearInterval(intervalId);
}
}, 500);
}
</script>
</body>
</html>

애니메이션 효과를 넣어서 만든 부분입니다.

로또 번호 생성기.html

0.00MB

많이 사용해 보세요.

좋은 소식은 알려주시구요~~~~

#로또번호
#로또당첨번호
#로또당첨번호확인
#로또당첨금액
#로또당첨확률
#로또당첨결과
#로또당첨조합
#로또추첨
#로또추첨일
#로또당첨방법
#로또당첨자
#로또번호생성기
#로또번호선택법
#로또번호예상
#로또번호조합
#로또번호확률
#로또번호추천
#로또번호분석
#로또번호시뮬레이션
#로또번호놀이터
#로또번호발표
#로또번호시작하는날
#로또번호사기
#로또번호통계
#로또번호뽑기

LIST

'Chat GPT 물어봅시다.' 카테고리의 다른 글

복불복 게임 (0)	2023.04.03
당첨!!로또 번호 생성기 (2)	2023.04.02
복불복 게임 제작 (0)	2023.04.02
벽돌깨기 게임 만들기 (0)	2023.04.02
당첨율 높은 로또 번호 생성기 (0)	2023.04.02