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

개선하고 싶었던 점은

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

이 두 가지 사항입니다.

const btn = document.getElementById("btn");
let tmp = 1, numbers;

function getindex(c) {
let d = 0;
for (d; c = c.previousElementSibling; d++);
return d
}

function decryptEffect(elem, time) {
const effect = setInterval(function() {
elem.innerText = Math.floor(Math.random()*44 + 1)
}, 10);
setTimeout(function() {
const random = Math.floor(Math.random() * numbers.length);
clearInterval(effect),
elem.classList.add("done"),
elem.innerText = numbers[random],
numbers.splice(random, 1)
}, time * 1000 + 1000)
}

function lottery() {
Array.from(document.querySelectorAll(".ball")).forEach(a => {
a.classList.remove("done"),
decryptEffect(a, getindex(a))
})
}

btn.addEventListener("click", function() {
tmp === 1 && (
numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],
tmp = 0,
btn.classList.add("hide"),
lottery(),
setTimeout(function() {
tmp = 1,
btn.classList.remove("hide")
}, 8500)
)
})


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

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

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

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

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 행운을 기대하며 토요일날 여기서 돌려 나온 숫자로 1장 사보았는데.... 1개도 안맞았어요 ㅋㅋ
    https://i.imgur.com/Osq2bHv.jpg

    1. 헉 진짜로 구매하셨네요 ㅋㅋㅋㅋㅋ

      https://imgur.com/dl1lE16.mp4

      제가 무능한 탓입니다 ㅠㅠ

  2. 여기서 나온 번호로 1장 사보려고요 🙂 당첨되면 알려드릴게요 ㅎㅎ

    그런데 몇번하다보니 똑같은 숫자도 나오네요. 시작만 눌렀는데..
    https://imgur.com/OdA2o4j.jpg

    1. 아 복권엔 같은 숫자가 안 나오나요??
      1~45 중 랜덤이란 말만 보고 만들었는데...같은 숫자가 안 나오는 거면 수정해야겠네요 ㅠㅠ

    2. 로또가 1번 부터 45번까지 숫자중 6개가 맞아야 1등 당첨이라.. 플러스로 나오는 보너스 숫자도 5개 맞고 1개 틀렸을때 보너스 숫자가 맞으면 2등인가 그럴거예요
      https://imgur.com/bTZiOqV.mp4

    3. 아...수정해야겠네요 ㅠㅠ
      알려주셔서 감사합니다.

      https://contents.vryjam.com/CDjbaARSveWRhwk.gif

    4. 이제 같은 숫자가 나오는 일은 없을 겁니다!