Membuat Count Down Timer Javascript

0
44

Kali ini saya akan memberikan tutorial tentang Count Down (Hitung waktu mundur) pada JavaScript. Pertama apa itu Count Down? Count Down adalah hitungan waktu mundur dari waktu akhir ke waktu awal. Count Down biasanya digunakan pada website toko online untuk memberi waktu sampai kapan diskon/penawaran akan berakhir.

Contoh Count Down:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <style>
      #expire {
        font-size: 22px;
        text-align: center;
        margin-top: 30px;
        line-height: auto;
      }
    </style>
    <div id="expire">
      <p class="lead"><strong>Waktu Tersisa</strong></p>
      <label id="hari"></label>
      <label id="hjam"></label>
      <label id="hmenit"></label>
      <label id="hdetik"></label>
    </div>
    <script>
      // Atur waktu akhir
      var waktuAkhir = new Date("Feb 30, 2020 20:30:0").getTime();

      // Update count down setiap 1 detik
      var x = setInterval(function() {

        // Atur waktu awal
        var waktuAwal = new Date().getTime();

        // Mencari hasil waktu antara waktu akhir dan waktu awal
        var distance = waktuAkhir - waktuAwal;

        // Menghitung waktu untuk hari, jam, menit, dan detik
        var hari = Math.floor(distance / (1000 * 60 * 60 * 24));
        var jam = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var menit = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var detik = Math.floor((distance % (1000 * 60)) / 1000);

        // Hasil di masing-masing elemen
        document.getElementById("hari").innerHTML = hari + " hari";
        document.getElementById("hjam").innerHTML = jam + " jam";
        document.getElementById("hmenit").innerHTML = menit + " menit";
        document.getElementById("hdetik").innerHTML = detik + " detik";

        // Memberi angka 0 jika masing-masing waktu kurang dari 10
        if (jam < 10) {
          document.getElementById("hjam").innerHTML = "0" + jam + " jam";
        }
        if (menit < 10) {
          document.getElementById("hmenit").innerHTML = "0" + menit + " menit";
        }
        if (detik < 10) {
          document.getElementById("hdetik").innerHTML = "0" + detik + " detik";
        }

        // Jika waktu habis maka muncul sebuah teks
        if (distance < 0) {
          clearInterval(x);
          document.getElementById("expire").innerHTML = "WAKTU HABIS";
          document.getElementById("hari").innerHTML = "00";
          document.getElementById("hjam").innerHTML = "00";
          document.getElementById("hmenit").innerHTML = "00";
          document.getElementById("hdetik").innerHTML = "00";
        }
      }, 1000);
    </script>
  </body>
</html>

Count Down menghitung mundur dari waktuAwal ke waktuAkhir. Kalian bisa menetapkan waktu akhir pada variabel “waktuAkhir” terserah kapan saja, tetapi harus lebih dari variabel “waktuAwal”, jika nilai variabel “waktuAkhir” tanggalnya kurang dari variabel “waktuAwal”, maka akan muncul tulisan “WAKTU HABIS” atau jika waktu sudah habis maka akan muncul tulisan “WAKTU HABIS”. Jika kita buat kosong tanggal pada variabel “waktuAwal” maka akan menunjukkan waktu default.

Hasil jika waktu sudah habis:

C:\Users\acer\Pictures\Screenshots\Screenshot (756).png

Hasil normal:

C:\Users\acer\Pictures\Screenshots\Screenshot (755).png

Sekian tutorial dari saya bila ada kukurangan, saya minta maaf yang sebesar-besarnya. Terima kasih semoga bisa bermanfaat bagi kita semua.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here