15_타이머

Javascript

by 모모87 2021. 3. 13. 02:48

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Countdown Timer</title>
        <link
            href="https://fonts.googleapis.com/css?family=Inconsolata"
            rel="stylesheet"
            type="text/css"
        />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="timer">
            <div class="timer__controls">
                <button data-time="20" class="timer__button">20초</button>
                <button data-time="300" class="timer__button">5분</button>
                <button data-time="900" class="timer__button">15분</button>
                <button data-time="1200" class="timer__button">20분</button>
                <button data-time="3600" class="timer__button">점심시간</button>
                <form name="customForm" id="custom">
                    <input
                        type="text"
                        name="minutes"
                        placeholder="타이머 설정 후 Enter"
                    />
                </form>
            </div>
            <div class="display">
                <h1 class="display__time-left">⏱</h1>
                <p class="display__end-time">타이머를 설정하세요!</p>
            </div>
        </div>

        <script src="scripts.js"></script>
    </body>
</html>

let countdown;
const timerDisplay = document.querySelector('.display__time-left');
const endTime = document.querySelector('.display__end-time');
const buttons = document.querySelectorAll('[data-time]');

function timer(seconds) {
    // clear any existing timers
    clearInterval(countdown);

    const now = Date.now();
    const then = now + seconds * 1000;
    displayTimeLeft(seconds);
    displayEndTime(then);

    countdown = setInterval(() => {
        const secondsLeft = Math.round((then - Date.now()) / 1000);
        // check if we should stop it!
        if (secondsLeft < 0) {
            clearInterval(countdown);
            return;
        }
        // display it
        displayTimeLeft(secondsLeft);
    }, 1000);
}
function displayTimeLeft(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;
    const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
    document.title = display;
    timerDisplay.textContent = display;
}

function displayEndTime(timestamp) {
    const end = new Date(timestamp);
    const hour = end.getHours();
    const adjustedHour = hour > 12 ? hour - 12 : hour;
    const minutes = end.getMinutes();
    endTime.textContent = `마감시간은 ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
}

function startTimer() {
    const seconds = parseInt(this.dataset.time);
    timer(seconds);
}
buttons.forEach((button) => button.addEventListener('click', startTimer));
document.customForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const mins = this.minutes.value;
    console.log(mins);
    timer(mins * 60);
    this.reset();
});

'Javascript' 카테고리의 다른 글

기본 풀페이지 패럴럭스 (0)	2021.03.24
제이쿼리 포토 갤러리 플러그인 (0)	2021.03.24
14_뮤직플레이어 (0)	2021.03.13
13_자기소개 낙녹 (0)	2021.03.13
12_포인트 글! (0)	2021.03.13