Membuat countdown timer dengan php

Question

Di bawah ini kita akan mempelajari cara membuat penghitung waktu mundur dengan JavaScript.

Table of Contents Show

Membuat Countdown Timer
Membuat Hitung Mundur (COUNTDOWN)
Sisa waktu anda ' + jam + ' jam : ' + menit + ' menit : ' + detik + ' detik
About Admin MC3

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Tetapkan tanggal kita menghitung mundur
var countDownDate = new Date("july 27, 2021 10:00:20").getTime();

// Perbarui hitungan mundur setiap 1 detik
var x = setInterval(function() {

  // Dapatkan tanggal dan waktu hari ini
  var now = new Date().getTime();
    
  // Temukan jarak antara sekarang dan tanggal hitung mundur
  var distance = countDownDate - now;
    
  // Perhitungan waktu untuk hari, jam, menit dan detik
  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);
    
  // Keluarkan hasil dalam elemen dengan id = "demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  //Jika hitungan mundur selesai, tulis beberapa teks
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

</body>
</html>

Membuat Countdown Timer

Contoh

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Tetapkan tanggal kita menghitung mundur
var countDownDate = new Date("july 27, 2021 10:00:20").getTime();

// Perbarui hitungan mundur setiap 1 detik
var x = setInterval(function() {

  // Dapatkan tanggal dan waktu hari ini
  var now = new Date().getTime();
    
  // Temukan jarak antara sekarang dan tanggal hitung mundur
  var distance = countDownDate - now;
    
  // Perhitungan waktu untuk hari, jam, menit dan detik
  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);
    
  // Keluarkan hasil dalam elemen dengan id = "demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  //Jika hitungan mundur selesai, tulis beberapa teks
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Membuat Hitung Mundur (COUNTDOWN)

16:22

Javascript countdown timer terkadang diperlukan untuk membuat sebuah halaman landing page seperti halaman perilisan sesuatu, maintenance atau under contruction. Tidak hanya untuk itu saja, namun beberapa file hosting yang menyediakan gratis, di halaman download akan diberikan countdown timer yang digunakan sebagai menampilkan iklan pada website itu. Countdown timer tidak berfungsi dengan baik dibeberapa ponsel contohnya java. Terkadang harus mereload sendiri dengan bantuan javascript di URL untuk melewati countdown timer. Tapi diponsel Android, semua javascript memungkinkan bekerja dengan baik salah satunya javascript countdown timer.

Seperti di situs ini yang memakai javascript countdown timer dibagian halaman pengalihan. Sengaja Saya buat untuk menampilkan beberapa iklan dihalaman itu. Membuatnya juga tidak begitu sulit hanya memerlukan sedikit pengertian dengan javascript.

Disini Saya akan membagikan javascript countdown timer yang sangat sederhana dan sekiranya mudah dipahami. Hanya menggunakan beberapa fungsi saja seperti if else, setinterval, dan window location. Sebelumnya silahkan pahami sedikit fungsi yang saya sebutkan tadi, dan jika sudah mengerti, silahkan salin kode dibawah ini.



< script src = "http://code.jquery.com/jquery-1.10.2.min.js"
type = "text/javascript" > < /script>

< script type = "text/javascript" >
    $(document).ready(function() {
        /** Membuat Waktu Mulai Hitung Mundur Dengan
          * var detik = 0,
          * var menit = 1,
          * var jam = 0
        */
        var detik = 00;
        var menit = 20;
        var jam = 0;
        /**
          * Membuat function hitung() sebagai Penghitungan Waktu
        */
        function hitung() {
            /** setTimout(hitung, 1000) digunakan untuk
                * mengulang atau merefresh halaman selama 1000 (1 detik)
            */
            setTimeout(hitung, 1000);
            /** Jika waktu kurang dari 10 menit maka Timer akan berubah menjadi warna merah */
            if (menit < 5 && jam == 0) {
                var peringatan = 'style="color:red"';
            };
            /** Menampilkan Waktu Timer pada Tag #Timer di HTML yang tersedia */
            $('#timer').html(
                'Sisa waktu anda ' + jam + ' jam : ' + menit + ' menit : ' + detik + ' detik
'
            );
            /** Melakukan Hitung Mundur dengan Mengurangi variabel detik - 1 */
            detik--;
            /** Jika var detik < 0
                * var detik akan dikembalikan ke 59
                * Menit akan Berkurang 1
            */
            if (detik < 0) {
                detik = 59;
                menit--;
                /** Jika menit < 0
                    * Maka menit akan dikembali ke 59
                    * Jam akan Berkurang 1
                */
                if (menit < 0) {
                    menit = 59;
                    jam--;
                    /** Jika var jam < 0
                        * clearInterval() Memberhentikan Interval dan submit secara otomatis
                    */
                    if (jam < 0) {
                        clearInterval();
                    }
                }
            }
        }
        /** Menjalankan Function Hitung Waktu Mundur */
        hitung();
    });
// ]]>
< /script>

Pertama – tama salin kode diatas dan tempel pada bagian headtags dihalaman yang ingin kamu beri countdown timer. Jangan lupa atur detik waktu berjalan pada variabel detik, menit, jam. Untuk menampilkan countdown timer dapat menggunakan kode seperti dibawah ini.

 <div id='timer'></div>

Kode diatas tempat dimana timer akan ditampilkan, sehingga tags html yang diberi attribute ID timer akan diberikan value yang sama dari javascript countdown timer. Kamu dapat mengubah span menjadi div, dan sebagainya.

Cukup mudah bukan..? Beberapa orang meng-kreasikan kode javascript countdown ini dengan bentuk progress bar, atau bahkan dengan tampilan yang lebih menarik.

Jika ada yang ditanyakan tentang diatas, silahkan berkomentar.

Tweet
Share
Share
Share
Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

kode php Coding countdown timer