Membuat Timer dengan PHP dan jQuery Part 1

Membuat Timer dengan PHP dan jQuery Part 1

Posted by On Desember 29, 2015 36 Comments

Timer berfungsi ketika kita membuat sebuah aplikasi ujian online atau semacamnya yang membutuhkan waktu pengerjaan dan lama pengerjaan, serta akan ter-submit secara otomasti jika waktu ujian sudah habis.

Berikut cara membuat timer dengan menggunakan PHP dan jQuery :

	<head>
      <!-- Kita membutuhkan jquery, disini saya menggunakan langsung dari jquery.com, jquery ini bisa didownload dan ditaruh dilocal -->
      <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

      <!-- Script Timer -->
		 <script type="text/javascript">
			$(document).ready(function() {
				  /** Membuat Waktu Mulai Hitung Mundur Dengan 
					* var detik = 0,
					* var menit = 1,
					* var jam = 1
				  */
				  var detik = 30;
				  var menit = 10;
				  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 < 10 && jam == 0){
						 var peringatan = 'style="color:red"';
				   };
 
				   /** Menampilkan Waktu Timer pada Tag #Timer di HTML yang tersedia */
				   $('#timer').html(
						  '<h1 align="center"'+peringatan+'>Sisa waktu anda <br />' + jam + ' jam : ' + menit + ' menit : ' + detik + ' detik</h1><hr>'
					);
	 
					/** 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>
	</head>

Sudah selesai membuat Timer, sekarang bagaimana menggunakannya ? cukup kita letakkan id=”timer“. Seperti berikut ini :

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

Bagaimana ? mudahkan dan cukup sederhana untuk diterapkan. semoga bermanfaat dan berhasil mencobanya 😀

Demo Aplikasi
Share

TOPICS