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

최종 수정일 : (7개월 전)

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

개선하고 싶었던 점은

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

이 두 가지 사항입니다.

let tmp = 1;
let numbers;

function decryptEffect(elementtime) {
    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(random1);
    }, time * 1000 + 1000);
}

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

document.getElementById("btn").addEventListener("click"function () {
    if (tmp === 1) {
        numbers = Array.from({ length45 }, (_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코드 모바일이시라면 클릭