Cara Membuat Countdown Timer dengan JQuery

Cara Membuat Countdown Timer dengan JQuery - Countdown timer adalah kode program yang berguna untuk melakukan hitungan mundur dari waktu yang sudah ditentukan. Countdown timer ini bisa nantinya anda gunakan pada website anda yang membutuhkan hitungan mundur, misalnya pada web tentang ujian online, anda dapat memanfaatkan countdown timer sebagai waktu penentu selesainya kegiatan ujian. Jadi ketika waktu pada timer menunjukkan waktu akhir maka akan otomatis menutup halaman atau menyelesaikan ujian online.

Gambar : Countdown Timer dengan JQuery

Pada postingan kali ini kita akan membuat countdown timer menggunakan jquery jadi perlu juga anda mendownload library jquery dan jquery countdown timer. Bisa anda download langsung disini. Setelah selesai download silahkan ikuti langkah pembuatan countdown timer dengan jquery berikut ini.

1. Buka folder countdown timer jquery.
2. Tempatkan file jquery yang tadi sudah anda download ke folder countdown timer jquery.
3. Kemudian extract file yang sudah anda download tadi dengan cara klik kanan extract to jquery.
4. Buat sebuah file dengan nama countdown.html lalu copy baris kode berikut ini kedalamnya.
   
   

    <script type="text/javascript" src="./jquery/jquery-2.0.3.js"></script>
   <script type="text/javascript" src="./jquery/jquery.countdownTimer.js"></script>
   <span id="future_date"></span>
   <script>
     $(function(){
       $('#future_date').countdowntimer({
          dateAndTime : "2016-01-01 00:00:01",
          size : "lg",
          regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
          regexpReplaceWith: "$1 Hari:$2:$3:$4"
       });
     });
   </script>

5. Simpan file tersebut kemudian silahkan buka file countdown.html tadi dengan browser anda.
   Jika sudah berhasil membuat countdown timer dengan jquery anda juga perlu memperhatikan beberapa baris kode yang nantinya bisa anda sesuaikan dengan keinginan anda.
   Pada baris dateAndTime bisa anda atur waktu berakhirnya countdown dengan format (TTTT-BB-HH JJ:MM:SS)
6. Bagian regexpReplaceWith variabel $1 menunjukkan hari, $2 menunjukkan jam $3 menunjukkan menit $4 menunjukkan detik. Jadi apabila anda menghapus salah satunya maka salah satunya tidak akan tampil lagi. Misal anda menghapus $1 maka yang akan tampil adalah jam, menit dan detik saja.

Baca Juga : Menggunakan TinyMCE di PHP