이펙트 응용편 - 서치 칠번째

검색 이펙트

이번 이펙트는 타이머을 추가하여 문제를 맞추는것입니다..

JS코드

정답을 체크하는 함수입니다. input박스에 값을 넣으면 자동으로 체크하여 보여줍니다.

코드 보기

let timeReamining = 120, //남은 시간
score = 0, //점수
timeInterval = "",
answers = {}; //새로운 정답
function checkInput() {
    let input = event.currentTarget.value.trim().toLocaleLowerCase();

    if (answers.hasOwnProperty(input) && !answers[input]) {
        answers[input] = true;

        //정답 표시하기
        searchAnswers.style.display = "block";
        searchAnswers.innerHTML += `<span>${input}</span>`;
        bgm.play();

        //점수 반영
        score++;
        searchScoreNow.innerText = score;
        //정답 초기화
        searchInput.value = "";
    } else {
        bgm2.play();
    }
    // console.log(answers);
}

JS코드

시간을 설정하는 코드입니다
setInterval을 사용해 타이머를 구성하였습니다.
또한 초를 분과 초로 나누어 시간을 보기 편하게 했습니다.

코드 보기

//시간 설정하기
timeInterval = setInterval(reduceTime, 1000);
function reduceTime() {
    timeReamining--;
    if (timeReamining == 0) endQuiz();
    searchTime.innerText = displayTime();
}
//시간 표시하기
function displayTime() {
    if (timeReamining <= 0) {
        return "0:00";
    } else {
        let minutes = Math.floor(timeReamining / 60);
        let seconds = timeReamining % 60;

        //초 단위가 한자리수 일 때 0을 추가
        seconds < 10 ? (seconds = "0" + seconds) : seconds;
        return `${minutes}:${seconds}`;
    }
}

원본 사이트 보기 원본 소스 보기