배너 이미지

[자바스크립트] 로또 추첨기

최종 수정일 : (4주 전)

우연히 새로 발견한 개발자 커뮤니티를 둘러보다 발견한 프로젝트에서 아쉬운 점이 보여 후다닥 만들어봤습니다.

개선하고 싶었던 점은

1 - 버튼을 연타하면 애니메이션이 진행되는 중에도 결과가 바뀐다.
2 - 새로운 숫자를 부여받을 때 조금 더 역동적인 애니메이션이 표시됐으면 좋겠다.

이 두 가지 사항입니다.

let tmp = 1;
let numbers;

function decryptEffect(element, time) {
const effect = setInterval(() => {
element.innerText = Math.floor(Math.random() * 44 + 1);
}, 10);

setTimeout(() => {
const random = Math.floor(Math.random() * numbers.length);

clearInterval(effect);
element.classList.add("done");
element.innerText = numbers[random];
numbers.splice(random, 1);
}, time * 1000 + 1000);
}

function lottery() {
document.querySelectorAll(".ball").forEach((element, index) => {
element.classList.remove("done");
decryptEffect(element, index);
});
}

document.getElementById("btn").addEventListener("click", function () {
if (tmp !== 1) return;

numbers = Array.from({ length: 45 }, (_, i) => i + 1);
tmp = 0;
btn.classList.add("hide");
lottery();
setTimeout(function () {
tmp = 1;
btn.classList.remove("hide");
}, 7500);
});

1번은 tmp란 항목을 만들어서 해결했습니다.

tmp가 1이면 애니메이션을 실행합니다.
애니메이션이 실행되면 tmp는 0으로 변경되고, 애니메이션이 끝나면 tmp가 1로 다시 변경됩니다.

2번은 텍스트를 복호화하는듯한 애니메이션을 만들어 해결했습니다.

숫자가 0.01초에 한 번씩 계속 바뀌다가 첫 번째 항목부터 숫자가 정해지며 공이 살짝 커졌다가 작아지는 애니메이션이 표시됩니다.


profile

이메일 주소는 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
카카오페이 qr코드 모바일이시라면 클릭