Cara Mudah Membuat Countdown Timer Dengan Javascript

Pada kesempatan kali ini, saya akan memberikan sebuah tips atau tutorial sederhana namun cukup um...
Penulis
Admin
Kategori
Tutorial
Estimasi
2 menit baca
Dilihat
565
Posting
25 Jul 2022
Cara Mudah Membuat Countdown Timer Dengan Javascript Pada kesempatan kali ini, saya akan memberikan sebuah tips atau tutorial sederhana namun cukup umum digunakan yaitu membuat countdown timer dengan Javascript sederhana dan powerful. Bagi kalian yang belum tahu, countdown sering kali digunakan didalam website e-commerce untuk memberikan informasi terkait waktu yang tersisa. Cara Mudah Membuat Countdown Timer Dengan Javascript
2022-11-25

Javascript merupakan bahasa pemrograman yang populer digunakan oleh website, hampir seluruh website yang tersedia didunia digital ini semuanya menggunakan Javascript sebagai komponen agar website menjadi lebih interaktif. Javascript ini termasuk kedalam 3 komponen penting lainnya seperti HTML dan CSS dan anda sebagai developer wajib untuk memahami bagaimana Javascript ini bekerja untuk website kamu.

Pada kesempatan kali ini, saya akan memberikan sebuah tips atau tutorial sederhana namun cukup umum digunakan yaitu membuat countdown timer dengan Javascript sederhana dan powerful. Bagi kalian yang belum tahu, countdown sering kali digunakan didalam website e-commerce untuk memberikan informasi terkait waktu yang tersisa, misalnya produk tersisa dalam waktu berapa menit, detik, jam, atau hari, flash sale dan masih banyak lagi. jika kalian sedang mencari cara untuk membuat countdown timer ini, artikel ini cocok untuk anda.

 

Membuat countdown timer dengan Javascript

 

 

1. Persiapan

Pertama kali yang harus anda siapkan adalah data waktu yang akan diproses menjadi countdown, contoh kasus misalnya anda memiliki website e-commerce sederhana dan anda menampilkan produk yang hanya tampil dalam 1 hari, pasti anda akan menampilkan tanggal berakhirnya kapan, misalnya produk ini akan expired pada tanggal 24-07-2022, tanggal tersebut ditampilkan melalui database yang sudah anda simpan, biasanya dalam format yyyy-mm-dd h:i:s.

 

2. Membuat varibel dan setInterval

Untuk merubah format tanggal tersebut kedalam countdown, anda perlu javascript untuk memprosesnya, anda bisa buka text editor favorit kalian, lalu panggil tanggal tersebut kedalam variabel tanggalProdukExpired.

// Set tanggal yang akan dijadikan timer
var tanggalProdukExpired = new Date('2022-07-27 08:07:01').getTime();

Selanjutnya kita akan membuat interval waktu yang sesuai dengan waktu saat ini, yang artinya setiap detiknya countdown akan terus berjalan mundur dalam 1 detik selama pengunjung website anda masih berada didalam halaman produk yang memproses countdown tersebut. Dalam variabel selanjutnya ini yang paling penting, kita akan menentukan waktu mundur dengan mencari selisih waktu data produk yang sudah diset tanggal expired dengan waktu saat ini.

var proses = setInterval(function() {
    // Memanggil tanggal dan waktu saat ini
    var waktuSekarang = new Date().getTime();
    
    // Mencari selisih waktu dan tanggal antara saat ini dan data produk
    var cariSelisih = tanggalProdukExpired - waktuSekarang;
}, 1000);

 

3. Memproses selisih waktu dengan tanggal expired dan menampilkan kedalam browser

Setelah kita sudah menentukan selisihnya, langkh selanjutnya adalah mengkalkulasikan hari, jam, menit dan detik dengan selisih yang sudah kita dapatkan.

// Memproses selisih waktu
var hari = Math.floor(cariSelisih / (1000 * 60 * 60 * 24));
var jam = Math.floor((cariSelisih % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var menit = Math.floor((cariSelisih % (1000 * 60 * 60)) / (1000 * 60));
var detik = Math.floor((cariSelisih % (1000 * 60)) / 1000);

Keempat komponen ini nantinya akan kita olah dan tampilkan kedalam browser melalui elemen id, kamu bisa membuat div baru dengan nilai id countdownProduk seperti berikut ini.

<div id="countdownProduk"></div>

Maka didalam javascript kita, kita perlu memanggil elemen id tersebut dengan menggunakan document.getElementById dan menampilkan keempat komponen tersebut kedalam div id yang sudah kita tentukan.

document.getElementById("countdownProduk").innerHTML = hari + " Hari " + jam + " Jam " + menit + " Menit " + detik + " Detik ";

 

4. Menghentikan countdown dan menampilkan EXPIRED jika sudah berakhir

Dalam proses ini saja kita sudah berhasil membuat countdown timer untuk produk anda, namun kita akan menambahkan elemen terakhir yang berfungsi untuk menampilkan EXPIRED jika sudah melebihi batas waktu, text EXPIRED ini nantinya akan menganti jam, menit dan detik menjadi sebuah text yang sudah kita tentukan sebelumnya dan menghentikan proses countdown itu sendiri, kamu bisa menambahkan syntax Javascript tersebut.

// Jika countdown berakhir, maka tampilkan EXPIRED
if (cariSelisih < 0) {
    clearInterval(proses);
    document.getElementById("countdownProduk").innerHTML = "EXPIRED";
}

Maka syntax full versionnya kira-kira seperti ini

<div id="countdownProduk"></div>

<script>
    // Set tanggal yang akan dijadikan timer
    var tanggalProdukExpired = new Date('2022-07-27 08:07:01').getTime();

    // Mengupdate timer setiap 1 detik
    var proses = setInterval(function() {

        // Memanggil tanggal dan waktu saat ini
        var waktuSekarang = new Date().getTime();

        // Mencari selisih waktu dan tanggal antara saat ini dan data produk
        var cariSelisih = tanggalProdukExpired - waktuSekarang;

        // Memproses selisih waktu
        var hari = Math.floor(cariSelisih / (1000 * 60 * 60 * 24));
        var jam = Math.floor((cariSelisih % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var menit = Math.floor((cariSelisih % (1000 * 60 * 60)) / (1000 * 60));
        var detik = Math.floor((cariSelisih % (1000 * 60)) / 1000);

        document.getElementById("countdownProduk").innerHTML = hari + " Hari " + jam + " Jam " + menit + " Menit " + detik + " Detik ";

        // Jika countdown berakhir, maka tampilkan EXPIRED
        if (cariSelisih < 0) {
            clearInterval(proses);
            document.getElementById("countdownProduk").innerHTML = "EXPIRED";
        }
    }, 1000);
</script>

Membuat countdown timer sederhana sudah selesai, anda bisa mengganti setiap nama variabel dengan nama yang anda inginkan.

 

Kesimpulan

Javascript dapat membantu anda untuk membuat sesuatu yang lebih menarik dan interaktif untuk pengunjung website anda, mungkin tidak semua orang dapat mengetahui bagaimana countdown timer ini dibuat, saya berharap dengan artikel sederhana ini, anda dapat membuat countdown timer untuk produk didalam website anda agar menarik bagi pengunjung dengan bantuan Javascript didalamnya.

Share