• Lihat Daftar Paket Kursus Aplikasi Berbasis Website KLIK TOMBOL INI

  • Blog

  • Cara Membuat Countdown Dengan Javascript

    • Selasa, 23 Januari 2018 22:03:55
    • Author : Brian Abraham
    7377
    1

    Halo guys, pada kesempatan kali ini Jasa Pembuatan Website punya sedikit tips dan trik mengenai cara membuat countdown dengan javascript. Perlu kalian ketahui sebelumnya, Countdown adalah bahasa Inggris yang asalnya terdiri dari count dan down yang gabungannya jika diartikan dimaksud dengan hitung mundur. Biasanya hitung mundur tersebut dalam bilangan hari, detik, atau satuan waktu lainnya ini dimulai dari angka tertentu untuk menunjukkan sisa waktu atau berakhirnya batas waktu sebelum melakukan sesuatu kegiatan atau suatu event khusus seperti untuk menentukan masa aktif session di website, menentukan batas pembayaran, membuat berita acara, redirect halaman, dll.

    Namun pada contoh yang saya berikan disini saya akan membuat event ulang tahun saya dengan memanfaatkan Countdown yang nantinya akan menghitung waktu mundur sampai tiba pada saat nya waktu ulang tahun saya, dan untuk contohnya kalian bisa ikuti tahapan saya.

    Berikut Tahapannya

    • Saya asumsikan sebelumnya, disini saya akan membuat peringatan Selamat Ulang Tahun pada tanggal 01/07/2017
    • Selanjutnya, kalian buat terlebih dahulu satu buah file dengan nama index.html di folder project kalian, ketikan kode seperti berikut
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cara Membuat Countdown Dengan Javascript</title>
  <style type='text/css'>
  
      body{
        margin: 200px; auto;
        height: 100%;
        margin-bottom: 250px;
        text-align: center;
        font-family: sans-serif;
        background: url('tahun-baru.jpg') center no-repeat;
        background-size: cover;
      }
      div {
        display: inline-block;
        padding: 5px;
        max-width: 80px;
        max-height: 100px;
        border: 1px solid #ccc;
        border-radius: 10px;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 2px lightblue, 0 0 25px blue, 0 0 5px lightblue;
        background-color: rgba(255, 255, 255, 0.5);
      }
      #days, #hours, #minutes, #seconds {
        font-size: 40px;
        border-bottom: 1px solid #ccc;
      }
      h1 {
        color: #fff;
      }


  </style>
  </head>
  <body>
    <script src="countdown.js"></script>
    <script>
      countdown('01/07/2017 11:59:59 PM', ['days', 'hours', 'minutes', 'seconds'], function() {
        document.write('<h1>Selamat Ulang Tahun Brian Abraham</h1>');
      });
    </script>
  </body>
</html>

<script>

var countdown = function(end, elements, callback) {
  var _second = 1000,
      _minute = _second * 60,
      _hour   = _minute * 60,
      _day    = _hour * 24,

      end = new Date(end),
      timer,

      calculate = function() {

        var now = new Date(),
          remaining = end.getTime() - now.getTime(),
          data;

        if(isNaN(end)) {
          console.log('Invalid date/time');
          return;
        }

        if(remaining <= 0) {
          clearInterval(timer);

          if(typeof callback === 'function') {
            callback();
          }

        }else {
          if(!timer) {
            timer = setInterval(calculate, _second);
          }

          data = {
              'days': Math.floor(remaining / _day),
              'hours': Math.floor((remaining % _day) / _hour),
              'minutes': Math.floor((remaining % _hour) / _minute),
              'seconds': Math.floor((remaining % _minute) / _second)
          }
          if(elements.length) {
            for (x in elements) {
              var x = elements[x];
              data[x] = ('00' + data[x]).slice(-2);
              document.getElementById(x).innerHTML = data[x];
            }
          }
          
        }
      };
    calculate();
}


</script>
    • Jika sudah save file tersebut dan lihat hasilnya di browser kalian.

    Sampai disini saya harap kalian sudah paham, dan apabila mengikuti tahapan yang saya berikan dengan benar maka sekarang kalian sudah berhasil cara membuat countdown dengan javascript.

    Sampai disini tips dan trik yang Jasa Pembuatan Website jelaskan mengenai cara membuat countdown dengan javascript, jangan sungkan untuk berkomentar di kotak komentar yang saya sediakan di bawah ini.



    - Apakah kalian sedang bingung mencari tempat khursus website terbaik di area jakarta, bogor, depok,
      tangerang dan bekasi ?
    - Apakah kalian seorang mahasiswa yang ingin menjadi Programmer Web Professional ?
    - Apakah kalian seorang karyawan diperusahaan yang ingin upgrade skill ke bidang Applikasi Web ?

    Kunjungi link dibawah ini :
    Tempat Khursus Website Terbaik Di Dumet School

    ~ Happy Coding Guys ~

    Average rating 4.0 of 4 vote

  • KOMENTAR

  • Reply
    • Andi Saputra Siahaan
      Andi Saputra Siahaan Selasa, 09 Oktober 2018 15:01:20

      bermanfaat sekali gan, count down scriptnya saya gunakan untuk membuat safelink

    • Brian Abraham
      Brian Abraham Kamis, 29 Nov 2018 20:17:33

      Alhamdulilah mas Andi. Semoga Bermanfaat. ☺

  • Kirim Komentar

    Untuk mengirim komentar, lengkapi formulir dibawah ini.