JavaScript를 사용한 간단한 카운트다운 타이머

30934 단어 css tutorial beginners javascript

JavaScript에서 수행하는 방법을 알아야 하는 표준 도구 중 하나는 시간을 조작하는 방법입니다. 이를 시연하기 위해 바닐라 JavaScript 및 CSS를 사용하여 카운트다운 타이머를 빌드합니다.

이것은 간단한 프로젝트이지만 JS에서 시간을 조작하고 CSS에서 속성을 사용자 정의하고 마지막으로 JS 클래스에 사용자 정의 매개변수를 추가하는 방법을 보여주는 프로젝트입니다.

YouTube에서 보기

파일 구조

index.html
/sass
     style.scss
/js
     init.js
     countdown.js
/css (generated by Sass)
   style.css
   style.min.css

우리의 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Clocks</title>
    <link rel="stylesheet" href="/css/style.min.css">
</head>
<body>
    <h2>Countdown Clock 1</h2>
    <div class="clock" id="clock1">
        <div data-value="days"></div>
        <div data-value="hours"></div>
        <div data-value="minutes"></div>
        <div data-value="seconds"></div>
    </div>
    <script src="/js/countdown.js"></script>
    <script src="/js/init.js"></script>
</body>
</html>

이제 기본 HTML 구조가 완성되었으므로 데이터를 추가하는 JS 클래스를 만들 수 있습니다. data-value를 사용하고 있으므로 HTML에 문자열을 추가할 필요가 없으므로 CSS로 수정하겠습니다.

카운트다운 JS 클래스

// class to create a countdown timer
class CountdownTimer {
    // setup timer values
    constructor({ selector, targetDate, backgroundColor = null, foregroundColor = null }) {
        this.selector = selector;
        this.targetDate = targetDate;
        this.backgroundColor = backgroundColor;
        this.foregroundColor = foregroundColor;

        // grab divs on frontend using supplied selector ID
        this.refs = {
            days: document.querySelector(`${this.selector} [data-value="days"]`),
            hours: document.querySelector(`${this.selector} [data-value="hours"]`),
            mins: document.querySelector(`${this.selector} [data-value="minutes"]`),
            secs: document.querySelector(`${this.selector} [data-value="seconds"]`),
        };
    }

    getTimeRemaining(endtime) {
        const total = Date.parse(endtime) - Date.parse(new Date());
        const days = Math.floor(total / (1000 * 60 * 60 * 24));
        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        const mins = Math.floor((total / 1000 / 60) % 60);
        const secs = Math.floor((total / 1000) % 60);
        return {
            total,
            days,
            hours,
            mins,
            secs,
        };
    }

    updateTimer({ days, hours, mins, secs }) {
        this.refs.days.textContent = days;
        this.refs.hours.textContent = hours;
        this.refs.mins.textContent = mins;
        this.refs.secs.textContent = secs;
    }

    updateColors() {
        if (this.backgroundColor != null) {
            this.refs.days.style.background = this.backgroundColor;
            this.refs.hours.style.background = this.backgroundColor;
            this.refs.mins.style.background = this.backgroundColor;
            this.refs.secs.style.background = this.backgroundColor;
        }

        if (this.foregroundColor != null) {
            this.refs.days.style.color = this.foregroundColor;
            this.refs.hours.style.color = this.foregroundColor;
            this.refs.mins.style.color = this.foregroundColor;
            this.refs.secs.style.color = this.foregroundColor;
        }
    }

    startTimer() {
        const timer = this.getTimeRemaining(this.targetDate);
        this.updateTimer(timer);
        this.updateColors();
        setInterval(() => {
            const timer = this.getTimeRemaining(this.targetDate);
            this.updateTimer(timer);
        }, 1000);
    }
}

이 클래스는 교체해야 하는 div 및 data-values를 제어합니다. 우리는 이것을 클래스로 생성하여 init.js 파일을 통해 모든 페이지에 카운트다운을 추가하기 위해 몇 줄의 코드를 추가하기만 하면 됩니다.

이 클래스는 selector , targetDate 및 선택적으로 backgroundColor 및 foregroundColor 를 사용합니다. 클래스를 호출할 때 이 값을 전달합니다.

우리 수업에 전화하기

init.js 파일에서 다음과 같이 카운트다운 클래스를 호출할 수 있습니다.

const timer = new CountdownTimer({
    selector: "#clock1",
    targetDate: new Date("September, 21 2022 18:00:00"),
});

이 코드는 클래스를 초기화하고 제공한 날짜까지 카운트다운을 시작합니다. 배경색과 전경색을 추가하여 조금 더 사용자 정의할 수도 있습니다. 필수는 아니지만 다음과 같이 표시됩니다.

const timer = new CountdownTimer({
    selector: "#clock1",
    targetDate: new Date("September, 21 2022 18:00:00"),
    backgroundColor: "rgba(0,0,0,.15)",
    foregroundColor: "rgba(0,0,0,.50)",
});

둘 중 하나를 사용자 지정하는 경우 배경색과 전경색을 모두 사용해야 합니다. null 값으로 설정했지만 결국 하나를 사용하면 다른 하나를 사용해야 합니다.

그렇게 쉽습니다. 이제 클래스를 설정했으므로 원하는 div에 카운트다운을 추가할 수 있습니다. 한 페이지에 여러 카운트다운을 추가할 수도 있습니다. 예를 들어:

<h2>Countdown Clock 1</h2>
<div class="clock" id="clock1">
    <div data-value="days"></div>
    <div data-value="hours"></div>
    <div data-value="minutes"></div>
    <div data-value="seconds"></div>
</div>

<h2>Countdown Clock 2</h2>
<div class="clock" id="clock2">
    <div data-value="days"></div>
    <div data-value="hours"></div>
    <div data-value="minutes"></div>
    <div data-value="seconds"></div>
</div>

// setup timer with set textual date in the future
const timer1 = new CountdownTimer({
    selector: "#clock1",
    targetDate: new Date("September, 21 2022 18:00:00"),
});

// setup timer with date set in the future
const timer2 = new CountdownTimer({
    selector: "#clock2",
    targetDate: new Date("September, 21 2022 18:00:00"),
    backgroundColor: "rgba(0,0,0,.15)",
    foregroundColor: "rgba(0,0,0,.50)",
});

참고 여러 div에서 이 클래스를 사용하려면 div ID와 일치하는 고유selector를 전달해야 합니다. 이 경우 div ID와 일치하는 #clock1 및 #clock2를 사용하고 있습니다.

카운트다운 스타일

CSS나 Sass를 사용해 본 적이 있다면 이 부분은 매우 표준적입니다. Sass에서 우리는 data-value 속성을 사용하여 카운트다운 div를 사용자 정의하고 있습니다. 여기에서 div(일, 시간, 분, 초)에 대한 텍스트를 추가합니다.

body {
    background-color: #38a4ef;
    color:#fff;
    font-size:16px;
    text-align:center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.clock {
    display:block;
    margin: 0 auto;
    max-width:80%;
    div {
        background-color:rgba(255,255,255,.25);
        color:#fff;
        display:inline-block;
        padding:2rem;
        margin: 0 1rem;
        font-size:2.5rem;
        width: calc(10% - 2rem);
        text-align:center;
        font-weight:bold;
        border-radius:5%;
        &[data-value*="days"]:after, &[data-value*="hours"]:after, &[data-value*="minutes"]:after, &[data-value*="seconds"]:after {
            display:block;
            font-size:.75rem;
            margin-top:.25rem;
            font-weight: 300;
        }
        &[data-value*="days"]:after {
            content:"Days"
        }
        &[data-value*="hours"]:after {
            content:"Hours"
        }
        &[data-value*="minutes"]:after {
            content:"Minutes"
        }
        &[data-value*="seconds"]:after {
            content:"Seconds"
        }
    }
}

@media screen and (max-width: 820px) {
    .clock {
        max-width:90%;
        div {
            width:calc(15% - 2rem)
        }
    }
}

@media screen and (max-width: 767px) {
    .clock {
        max-width:100%;
        div {
            width:calc(30% - 4rem);
            margin:.5rem;
            padding: .5rem;
            font-size:1rem;
            &[data-value*="days"]:after, &[data-value*="hours"]:after, &[data-value*="minutes"]:after, &[data-value*="seconds"]:after {
                font-size:.5rem;
            }
        }
    }
}

:after CSS 선택기를 사용하여 div에 단어를 추가합니다. 이렇게 하면 페이지에 배치할 때마다 편집할 필요가 없습니다.

또한 반응형 미디어 쿼리를 Sass 스타일시트에 추가하여 태블릿과 휴대폰에서 작동하도록 했습니다.

결론

바닐라 자바스크립트 카운트다운 타이머가 있습니다. 간단한 프로젝트이지만 JS와 CSS로 할 수 있는 몇 가지 멋진 작업을 살펴봅니다. 앞으로의 프로젝트에 도움이 되었으면 합니다.

Reference

이 문제에 관하여(JavaScript를 사용한 간단한 카운트다운 타이머), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thedevdrawer/simple-countdown-timer-using-javascript-4af7

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

【TypeScript】redux-observable로 ofType의 형태를 완전하게 추론시킨다

정수와 문자열

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다