İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır
Zafer Teker
tekzaf@yahoo.com

Kalan Zamanı Gösteren Bir Web Bileşeni

Bu örnekte kalan zamanı gösteren bir örnek yapıyoruz. Örneğin 1 saat, 12 dakika, 30 saniye gibi bir değer verirseniz bizim yazı alanında kalan zaman süre bitene kadar gösterilir. Süre bittiğinde "Zaman Doldu" uyarısı yapar. Bu örnek web sayfalarında kullanılabilir.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2 <head>
  3 <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
  4 	var isFinish=false;
  5 	function start(hour,minute,second){
  6 		if(!isFinish){
  7 			if(hour==0&&minute==0&&second==0){					
  8 				isFinish=true;
  9 				finish();
 10 			}else{
 11 				if(second>0){
 12 					second--;
 13 				}else{
 14 					second=59;
 15 					if(minute>0){
 16 						minute--;
 17 					}else{
 18 						minute=59;
 19 						hour--;
 20 					}
 21 				}
 22 				setValue(hour,minute,second);
 23 				setTimeout("start("+hour+","+minute+","+second+")",1000);										
 24 			}
 25 		}
 26 	}
 27 	function finish(){
 28 		alert("Zaman Doldu");
 29 	}
 30 	function setValue(hour,minute,second){
 31 		var textField=this.document.test.CronometerText;		
 32 		textField.value=getWithZero(hour)+":"+getWithZero(minute)+":"+getWithZero(second);	
 33 	}
 34 	function getWithZero(number){
 35 		if(number<10){
 36 			return "0"+number;
 37 		}else{
 38 			return number;
 39 		}
 40 	}
 41 </SCRIPT>
 42 </head>
 43 <body onLoad="start(1,30,0)">
 44 <form name="test">	
 45 	<input type="text" name="CronometerText" size="10"></input>
 46 </form>
 47 </body>
 48 </html>

start fonksiyonu ile süreç başlatılır. ilk paramtre saat,ikinci paramtre dakika ve son parammetre saniyedir. setTimeout fonksiyonu ileher saniyede günceleme yapılır. Geriye doğru değerlerin bulma mantığı şudur. Saniye 0 olmadığı sürece saniye bir azaltılır. Eğer saniye sıfır ise dakika azaltılır. Eğer dakika 0 ise saat bir azaltılır. Bu şekilde zaman azalır. Tüm değerler 0 olduğu zaman işlem biter.

Dosya Listesi

İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır