Cara menggunakan javascript timer

Question

03/03/2015 Aulia Rahmah Alhafidz 8442 Website

Table of Contents Show

setTimeout()
setInterval()
Bagaimana sih cara membuatnya ?
Buat sebuah file index
Script HTML
Script JavaScript

JavaScript memiliki banyak fitur yang bisa digunakan untuk memanipulasi elemen-elemen yang ada di HTML maupun CSS. Begitu juga dengan Timer. Pada JavaScript kita bisa menggunakan Timer untuk menjalankan suatu setiap selang waktu tertentu.

JavaScript umumnya memiliki dua cara untuk membuat fungsi bisa dijalankan dengan timer :

setTimeout()
setInterval()

setTimeout()

penulisan script dasar :

setTimeout("perintah", waktu);

Contoh penggunaan :

<script type="text/javascript">
    setTimeout("alert('Belajar Timer JavaScript!')", 5000);
</script>

Hasilnya seperti berikut :

Keterangan :

Alert akan muncul setelah waktu 5 detik (5000). 1 detik sama dengan 1000 milidetik.

setInterval()

penulisan script dasar :

setInterval("perintah", waktu);

Contoh penggunaan :

<script type="text/javascript">
    setInterval("alert('Belajar Timer JavaScript!')", 5000);
</script>

Hasilnya seperti berikut :

Keterangan :

Alert akan muncul setiap 5 detik (5000) sekali. 1 detik sama dengan 1000 milidetik.
Paham ya? Semoga bermanfaat :)

No data.

hai hai hai... Selamat datang kembali sobat hehehe.. Jika pada postingan sebelumnya saya sudah berbagi cara membuat jam digital menggunakan javascript. Nah, pada kesempatan kali ini saya akan berbagi tutorial kebalikan dari postingan sebelumnya nih, yaitu bagaimana cara membuat countdown timer menggunakan javascript.

Sebenarnya untuk scriptnya sendiri hampir mirip dengan script jam digital yang kemarin kok sob, hanya saja, pada kasus countdown timer kita harus melakukan pengurangan dari jam / waktu yang sudah kita tentukan dengan waktu sekarang.

Bagaimana sih cara membuatnya ?

Sepertinya sobat semua sudah penasaran ya hehe.. baik sobat langsung saja kita ke inti dari postingan kali ini. Untuk membuat sebuah countdown timer silahkan sobat ikuti langkah-langkah di bawah ini :

Buat sebuah file index

Disini sobat bisa membuat file dengan extensi .html ya, karena pada tutorial kali ini kita tidak akan berhubungan dengan database kok sob.

Script HTML

Jika sudah membuat sebuah file index, untuk langkah selanjutnya silahkan sobat ketikkan script berikut ini pada file index yang baru saja sobat buat tadi

Script CSS

Agar tampilannya lebih menarik, silahkan tambahkan script css berikut ini tepat di atas tag </title> pada file index tadi ya sob

Script JavaScript

Untuk langkah yang terakhir, silahkan sobat tambahkan code Javascript di bawah ini tepat di atas tag </body> pada file index yang tadi.

Jika semua step sudah sobat lakukan, sekarang silahkan sobat simpan dan jalankan file index tersebut dengan mendouble click file-nya.. untuk hasilnya akhirnya kurang lebih seperti pada gambar di atas ya sob.

Nah gimana sobat? mudah bukan.. Oh iya sobat bisa merubah tanggal deadline sesuai keinginan sobat ya. Yang perlu sobat ingat adalah format penulisan tanggalnya saja harus sesuai. Oke sobat, saya rasa cukup ini tutorial yang bisa saya bagi kali ini, semoga sedikit coretan ini bisa bermanfaat buat sobat semua. Oh iya, silahkan share jika dirasa artikel ini bermanfaat bagi yang lain ya.. Happy Coding

Subscribe to our newsletter and never miss any upcoming articles

Perusahaan-perusahaan besar biasanya 1 bulan sebelum launching atau bahkan lebih sudah mengumumkan kepada publik di website bisa dalam bentuk video, gambar, bahkan ada dengan countdown timer. Countdown juga sering dipakai untuk menyambut pergantian tahun diakhir tahun menymbut tahun baru, ada juga yang pakai untuk ucapan ulang tahun.

Saat ini saya akan membahas bagaimana cara membuat countdown timer menggunakan javascript?

Siapkan kode html seperti berikut

  <div class="countdown">
      <div class="time">
        <span id="days">00</span>
        <span>days</span>
      </div>
      <div class="semicolon">:</div>
      <div class="time">
        <span id="hours">00</span>
        <span>hours</span>
      </div>
      <div class="semicolon">:</div>
      <div class="time">
        <span id="minutes">00</span>
        <span>minutes</span>
      </div>
      <div class="semicolon">:</div>
      <div class="time">
        <span id="seconds">00</span>
        <span>seconds</span>
      </div>
    </div>

Pada kode html diatas telah diberi id untuk days, hours, minutes, dan seconds yang akan diupdate nilainya ketika ada perubahan dari timer sehingga pada website countdown berjaln dengan baik. Bagian ini akan dilakukan menggunakan DOM javascript. Berikut kode javascriptnya.

function getCounter() {
  var countDownDate = new Date("Aug 11, 2021 22:00:00").getTime();

  var x = setInterval(function () {
    var now = new Date().getTime();

    var distance = countDownDate - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    var textDays = document.getElementById("days");
    var textHours = document.getElementById("hours");
    var textMinutes = document.getElementById("minutes");
    var textSeconds = document.getElementById("seconds");

    textDays.innerHTML = days < 10 ? "0" + days : days;
    textHours.innerHTML = hours < 10 ? "0" + hours : hours;
    textMinutes.innerHTML = minutes < 10 ? "0" + minutes : minutes;
    textSeconds.innerHTML = seconds < 10 ? "0" + seconds : seconds;

    if (distance < 0) {
      clearInterval(x);
    }
  }, 1000);
}

Hasilnya akan seperti berikut.

Selanjutnya agar terlihat rapi, beri sedikit sentuhan styling css seperti kode berikut.

.countdown {
  margin-bottom: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
@media only screen and (max-width: 1024px) {
  .countdown {
    justify-content: center;
  }
}
.countdown .time {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.countdown .time:not(:last-child) {
  margin-right: 16px;
}
.countdown .time #days,
.countdown .time #hours,
.countdown .time #minutes,
.countdown .time #seconds,
.countdown .time .semicolon {
  font-family: Samsung Sharp Sans;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.3px;
}
@media only screen and (min-width: 1024px) {
  .countdown .time #days,
  .countdown .time #hours,
  .countdown .time #minutes,
  .countdown .time #seconds,
  .countdown .time .semicolon {
    font-size: 72px;
    line-height: 91px;
  }
}
@media only screen and (max-width: 1024px) {
  .countdown .time #days,
  .countdown .time #hours,
  .countdown .time #minutes,
  .countdown .time #seconds,
  .countdown .time .semicolon {
    font-size: 40px;
    line-height: 50px;
    text-align: center;
  }
}
.countdown .time span {
  font-family: Samsung Sharp Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.3px;
  align-self: center;
}
.countdown .semicolon {
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-family: Samsung Sharp Sans;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0.3px;
}
@media only screen and (min-width: 1024px) {
  .countdown .semicolon {
    font-size: 72px;
    line-height: 91px;
  }
}
@media only screen and (max-width: 1024px) {
  .countdown .semicolon {
    font-size: 40px;
    line-height: 50px;
    text-align: center;
  }
}

Maka hasilnya seperti berikut.

Berikut kode secara lengkapnya.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>countdown</title>
  <link href="//fonts.cdnfonts.com/css/samsung-sharp-sans" rel="stylesheet" />
  <style>
    .countdown {
      margin-bottom: 40px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }

    @media only screen and (max-width: 1024px) {
      .countdown {
        justify-content: center;
      }
    }

    .countdown .time {
      display: flex;
      flex-direction: column;
      justify-content: start;
    }

    .countdown .time:not(:last-child) {
      margin-right: 16px;
    }

    .countdown .time #days,
    .countdown .time #hours,
    .countdown .time #minutes,
    .countdown .time #seconds,
    .countdown .time .semicolon {
      font-family: Samsung Sharp Sans;
      font-style: normal;
      font-weight: bold;
      letter-spacing: 0.3px;
    }

    @media only screen and (min-width: 1024px) {

      .countdown .time #days,
      .countdown .time #hours,
      .countdown .time #minutes,
      .countdown .time #seconds,
      .countdown .time .semicolon {
        font-size: 72px;
        line-height: 91px;
      }
    }

    @media only screen and (max-width: 1024px) {

      .countdown .time #days,
      .countdown .time #hours,
      .countdown .time #minutes,
      .countdown .time #seconds,
      .countdown .time .semicolon {
        font-size: 40px;
        line-height: 50px;
        text-align: center;
      }
    }

    .countdown .time span {
      font-family: Samsung Sharp Sans;
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
      line-height: 15px;
      text-align: center;
      letter-spacing: 0.3px;
      align-self: center;
    }

    .countdown .semicolon {
      margin-right: 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      font-family: Samsung Sharp Sans;
      font-style: normal;
      font-weight: bold;
      letter-spacing: 0.3px;
    }

    @media only screen and (min-width: 1024px) {
      .countdown .semicolon {
        font-size: 72px;
        line-height: 91px;
      }
    }

    @media only screen and (max-width: 1024px) {
      .countdown .semicolon {
        font-size: 40px;
        line-height: 50px;
        text-align: center;
      }
    }
  </style>
</head>

<body>
  <div class="hero">
    <div class="countdown">
      <div class="time">
        <span id="days">00</span>
        <span>days</span>
      </div>
      <div class="semicolon">:</div>
      <div class="time">
        <span id="hours">00</span>
        <span>hours</span>
      </div>
      <div class="semicolon">:</div>
      <div class="time">
        <span id="minutes">00</span>
        <span>minutes</span>
      </div>
      <div class="semicolon">:</div>
      <div class="time">
        <span id="seconds">00</span>
        <span>seconds</span>
      </div>
    </div>
  </div>
  <script>
    function getCounter() {
      var countDownDate = new Date("Aug 11, 2021 22:00:00").getTime();

      var x = setInterval(function () {
        var now = new Date().getTime();

        var distance = countDownDate - now;

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor(
          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        var textDays = document.getElementById("days");
        var textHours = document.getElementById("hours");
        var textMinutes = document.getElementById("minutes");
        var textSeconds = document.getElementById("seconds");

        textDays.innerHTML = days < 10 ? "0" + days : days;
        textHours.innerHTML = hours < 10 ? "0" + hours : hours;
        textMinutes.innerHTML = minutes < 10 ? "0" + minutes : minutes;
        textSeconds.innerHTML = seconds < 10 ? "0" + seconds : seconds;

        if (distance < 0) {
          clearInterval(x);
        }
      }, 1000);
    }

    getCounter();

  </script>
</body>

</html>