Membuat Timer dari Detik – Bulan dengan PHP dan jQuery

Membuat Timer dari Detik – Bulan dengan PHP dan jQuery

Sebelumnya saya sudah pernah membuat Membuat Timer dengan PHP dan jQuery Part 1, kali ini saya akan memodifikasi sedikit yang awalnya dari jam, menit dan detik saya tambahi menjadi bulan, hari, jam, menit dan detik.

Berikut script lengkapnya:

	<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 	= 5; 
				var menit 	= 5;
				var jam 	= 5;
				var hari	= 5;
				var bulan	= 5;
				 
				 /**
				   * 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 && hari == 0 && bulan == 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 />' + bulan + ' bulan : ' + hari + ' hari : ' + 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 jam < 0
								* Maka jam akan dikembali ke 23
								* Jam akan Berkurang 1
							*/
							if(jam < 0) {
								jam = 23;
								hari --;
								
								/** Jika hari < 0
									* Maka hari akan dikembali ke 29
									* Jam akan Berkurang 1
								*/								
								if(hari < 0) {
									hari = 29
									bulan --;
									
									/** Jika var bulan < 0
										* clearInterval() Memberhentikan Interval dan submit secara otomatis
									*/
									if(bulan < 0){
										clearInterval(); 
										/** Variable yang digunakan untuk submit secara otomatis di Form */ 
										var sub = document.getElementById("sub"); 
										alert('Waktu Anda telah habis, Terima kasih sudah berkunjung.');
										sub.submit(); 
									}
								}
							}
						} 
					} 
				}           
				/** 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>
		<form action="." id="sub" method='POST' ></form>
    </body>

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

Demo Aplikasi
Share