Bagaimana cara menghitung mundur di javascript?

Question

Salah satu alat standar yang perlu Anda ketahui bagaimana melakukannya di JavaScript adalah. bagaimana memanipulasi waktu. Untuk mendemonstrasikan ini, kami akan membuat penghitung waktu mundur menggunakan vanilla JavaScript dan CSS

Table of Contents Show

Lihat Ini Di YouTube
Struktur File
Kelas JS Countdown kami
Memanggil Kelas Kami
Gaya Hitung Mundur Kami
Bagaimana cara membuat hitungan mundur dalam JavaScript?
Bagaimana cara menghitung mundur 10 detik dalam JavaScript?
Bagaimana cara menunjukkan sisa waktu dalam JavaScript?
Bagaimana cara memulai penghitung waktu dalam JavaScript?

Ini adalah proyek sederhana, tetapi yang menunjukkan kepada Anda cara memanipulasi waktu di JS, menyesuaikan atribut di CSS, dan terakhir menambahkan parameter khusus ke kelas JS Anda

Lihat Ini Di YouTube

Struktur File

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

Masuk ke mode layar penuh Keluar dari mode layar penuh

HTML kami

<!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>

_

Masuk ke mode layar penuh Keluar dari mode layar penuh

Sekarang setelah kita memiliki struktur HTML dasar, kita dapat membuat kelas JS yang menambahkan data. Perhatikan kita menggunakan data-value_ jadi kita tidak perlu menambahkan string di HTML di sana, kita akan memodifikasinya dengan CSS

Kelas JS Countdown kami

// 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);
    }
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Kelas ini akan mengontrol div dan

<!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>

0 yang perlu kita ganti. Kami membuat ini sebagai kelas sehingga kami cukup menambahkan beberapa baris kode untuk menambahkan hitungan mundur di halaman mana pun melalui file

<!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>

1 kami

Kelas ini mengambil

<!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>

2,

<!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>

3, dan opsional

<!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>

4 dan

<!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>

5. Kami akan meneruskan nilai-nilai ini ketika kami memanggil kelas

Memanggil Kelas Kami

Dalam file

<!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>

_1 Anda, Anda dapat memanggil kelas hitung mundur menggunakan sesuatu seperti ini

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

timer.startTimer();

Masuk ke mode layar penuh Keluar dari mode layar penuh

Kode itu akan menginisialisasi kelas kita dan memulai hitungan mundur ke tanggal yang kita berikan. Anda juga dapat menambahkan warna latar belakang dan latar depan untuk membuatnya lebih sesuai. Mereka tidak diperlukan tetapi akan terlihat seperti ini

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)",
});

timer.startTimer();

Masuk ke mode layar penuh Keluar dari mode layar penuh

Anda harus menggunakan warna latar belakang dan latar depan jika Anda menyesuaikan salah satunya. Kami telah menyiapkannya untuk nilai nol, tetapi pada akhirnya, jika Anda menggunakan satu, Anda harus menggunakan yang lain

Semudah itu. Sekarang setelah Anda menyiapkan kelas, Anda dapat menambahkan hitungan mundur ke div mana pun yang Anda inginkan. Anda juga dapat menambahkan beberapa hitungan mundur pada satu halaman. Misalnya

<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>

Masuk ke mode layar penuh Keluar dari mode layar penuh

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

timer1.startTimer(); 

// 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)",
});

timer2.startTimer();

Masuk ke mode layar penuh Keluar dari mode layar penuh

Catatan Untuk menggunakan kelas ini pada beberapa div, Anda harus memberikan

<!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>

2 unik yang cocok dengan ID div. Dalam hal ini, kami menggunakan

<!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>

_8 dan

<!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>

9 yang cocok dengan ID div kami

Gaya Hitung Mundur Kami

Bagian ini cukup standar jika Anda pernah menggunakan CSS atau Sass. Perhatikan di Sass, kami menyesuaikan div hitung mundur menggunakan atribut data-value mereka. Di sinilah kami menambahkan teks untuk div kami (Hari, Jam, Menit, Detik)

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;
            }
        }
    }
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Kami hanya menggunakan. setelah pemilih CSS untuk menambahkan kata-kata ke div. Ini mencegah kita untuk mengeditnya setiap kali kita menempatkannya di halaman

Saya juga telah menambahkan kueri media responsif ke lembar gaya Sass kami sehingga dapat berfungsi di tablet dan ponsel

Kesimpulan

Itu dia, penghitung waktu mundur JavaScript vanilla. Ini adalah proyek sederhana, namun membahas beberapa hal keren yang dapat Anda lakukan dengan JS dan CSS. Saya harap ini membantu dalam proyek masa depan Anda

Bagaimana cara membuat hitungan mundur dalam JavaScript?

Tampilkan jam di halaman, dan hentikan jam saat mencapai nol. .

Langkah 1. Tetapkan Tanggal Akhir yang Valid. Tanggal dan waktu akhir yang valid harus berupa string dalam format apa pun yang dipahami oleh Tanggal JavaScript. .

Langkah 2. Hitung Sisa Waktu. .

Langkah 3. Keluarkan hasilnya. .

Langkah 4. Tulis beberapa teks jika hitungan mundur selesai

Bagaimana cara menghitung mundur 10 detik dalam JavaScript?

Anda dapat membuat hitungan mundur 10 detik dalam JavaScript menggunakan fungsi setInterval() .

Bagaimana cara menunjukkan sisa waktu dalam JavaScript?

Hitung Sisa Waktu . Variabel now memanggil metode getTime() dan menyimpan waktu saat ini dalam format UTC. Variabel t menghitung sisa waktu dengan mengurangkan waktu saat ini dari tanggal akhir