Merhaba, bu uygulamada 0-9 arasında yukarı aşağı bir sayıcı yapacağız ki bunu yaparken < table / > html elemanını kullanacağız. Uygulamada daha önce yaptığım ve "Desen kodlama" başlığı ile verdiğim uygulamayı kullanarak 0-9 arasındaki rakamların desenlerini oluşturdum. Sizler de aynı uygulamayı kullanarak farklı rakamlar tasarlayabilirsiniz. Temel olarak aşağıdaki gibi bir ekran tasarımımız olacak, burada açılan kutu ile sayıcının hangi yönde sayma yapacağını Başlat düğmesi ile sayma işlemi başlatılıp durduralabiliyor. Uygulamada sayma işlemi 1 saniye aralıkla devam etmektedir buradaki gibi sürekli tekrar eden işlemler için id=setInterval("fonksiyon()", sure); kullanıyoruz ve burada fonksiyon(); çalıştırılmak istenen fonksiyonun adı olmalıdır, sure ise milisaniye türünden bir tamsayı değer olmalıdır. Misal süre için 5000 verilmiş ise işlemler her 5 saniyede bir tekrar edeilecek demektir. Son olarak id ise otomatik tekrar işlemi için atanan bir işlem numarasını (process id gibi) ifade etmektedir ki bu numarayı kullanarak tekrar işlemine son verilebilir. Örneğin clearInterval(id); id ile verilen tekrar işlemini sonlandırmaktadır.
Sayfanın HTML kodları aşağı verdiğim gibidir. Burada görüldüğü üzere sayfa yüklenirken temizle(); fonksyionu çağırılarak tablo temizlenmektedir.
< body onload="temizle()" >
< table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" >
< tr >
< td height="5%" id="baslikTD" colspan="3" ><span style="color:crimson" ><td ></ span > ile 0-9 Yukarı / Aşağı sayıcı</ td >
</ tr >
< tr >
< td colspan="3" height="90%" align="center" valign="middle" >
< table border="0" cellpadding="0" cellspacing="0" >
< tr >
< td id="huc11" class="hucre" > </ td >
< td id="huc12" class="hucre" > </ td >
< td id="huc13" class="hucre" > </ td >
< td id="huc14" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc21" class="hucre" > </ td >
< td id="huc22" class="hucre" > </ td >
< td id="huc23" class="hucre" > </ td >
< td id="huc24" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc31" class="hucre" > </ td >
< td id="huc32" class="hucre" > </ td >
< td id="huc33" class="hucre" > </ td >
< td id="huc34" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc41" class="hucre" > </ td >
< td id="huc42" class="hucre" > </ td >
< td id="huc43" class="hucre" > </ td >
< td id="huc44" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc51" class="hucre" > </ td >
< td id="huc52" class="hucre" > </ td >
< td id="huc53" class="hucre" > </ td >
< td id="huc54" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc61" class="hucre" > </ td >
< td id="huc62" class="hucre" > </ td >
< td id="huc63" class="hucre" > </ td >
< td id="huc64" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc71" class="hucre" > </ td >
< td id="huc72" class="hucre" > </ td >
< td id="huc73" class="hucre" > </ td >
< td id="huc74" class="hucre" > </ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td height="5%" width="10%" id="konumTD" ></ td >
< td height="5%" width="80%" align="center" >
<input id="btnBaslat" type="button" value="Başlat" onclick="baslat()" style="margin-right: 10px;"/ >
<select id="yon" >
< option value="yukari" selected >Yukarı</ option >
< option value="asagi" >Aşağı</ option >
</ select >
</ td >
< td height="5%" width="10%" id="tasarimciTD" >www.bilalsert.com.tr</ td >
</ tr >
</ table >
</ body >
Sayfanın tam olarak işlevini yerine getirebilmesi için javascript kodlarına ihtiyacı var bunun için aşağıda verdiğim kodları kullanmanız gerekiyor. Bu kodların bu kadar uzun olması sizi yanıltmasın zira büyük bir bölümü hücrelerin renklendirilmesi için yazılan satırlardan oluşuyor ve yine hatırlatayım ki bunları yazmıyor desen kodlayıcıya yazdırıyor buraya gelip sadece elde ettiğimiz sonuçları yapıştırıyoruz.
<script type="text/javascript" language="javascript" >
// Global degisken tanimlamalari yapiliyor. Buradaki degiskenler
// tüm fonksiyonlarda çağırılarak kullanilabilir.
var islemID=0;
var deger=0;
function sayici(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : .../.../2019 | 13:54
// Amaç : Sayfayi ilk konumuna döndürmek
// Giriş/Çıkış : yok
// Çağrıldığı yer : btnTemizle.click(), body.onload()
/////////////////////////////////////////////////////////////////
if(yon.value=="yukari"){
//yukari say
if(deger<9)deger++;else deger=0;
}else{
//asagi say
if(deger >0)deger--;else deger=9;
}
konumTD.innerHTML="\"color:crimson\" >deger=" + deger; +"";
//rakamlar basiliyor
switch(deger){
case 0:
temizle();
huc11.className="etkinHucre";
huc12.className="etkinHucre";
huc13.className="etkinHucre";
huc14.className="etkinHucre";
huc21.className="etkinHucre";
huc24.className="etkinHucre";
huc31.className="etkinHucre";
huc34.className="etkinHucre";
huc41.className="etkinHucre";
huc44.className="etkinHucre";
huc51.className="etkinHucre";
huc54.className="etkinHucre";
huc61.className="etkinHucre";
huc64.className="etkinHucre";
huc71.className="etkinHucre";
huc72.className="etkinHucre";
huc73.className="etkinHucre";
huc74.className="etkinHucre";
break;
case 1:
temizle();
huc13.className="etkinHucre";
huc22.className="etkinHucre";
huc23.className="etkinHucre";
huc33.className="etkinHucre";
huc43.className="etkinHucre";
huc53.className="etkinHucre";
huc63.className="etkinHucre";
huc72.className="etkinHucre";
huc73.className="etkinHucre";
huc74.className="etkinHucre";
break;
case 2:
temizle();
huc12.className="etkinHucre";
huc13.className="etkinHucre";
huc21.className="etkinHucre";
huc24.className="etkinHucre";
huc34.className="etkinHucre";
huc43.className="etkinHucre";
huc52.className="etkinHucre";
huc61.className="etkinHucre";
huc71.className="etkinHucre";
huc72.className="etkinHucre";
huc73.className="etkinHucre";
huc74.className="etkinHucre";
break;
case 3:
temizle();
huc11.className="etkinHucre";
huc12.className="etkinHucre";
huc13.className="etkinHucre";
huc14.className="etkinHucre";
huc24.className="etkinHucre";
huc34.className="etkinHucre";
huc42.className="etkinHucre";
huc43.className="etkinHucre";
huc44.className="etkinHucre";
huc54.className="etkinHucre";
huc64.className="etkinHucre";
huc71.className="etkinHucre";
huc72.className="etkinHucre";
huc73.className="etkinHucre";
huc74.className="etkinHucre";
break;
case 4:
temizle();
huc11.className="etkinHucre";
huc21.className="etkinHucre";
huc31.className="etkinHucre";
huc41.className="etkinHucre";
huc43.className="etkinHucre";
huc51.className="etkinHucre";
huc52.className="etkinHucre";
huc53.className="etkinHucre";
huc54.className="etkinHucre";
huc63.className="etkinHucre";
huc73.className="etkinHucre";
break;
case 5:
temizle();
huc11.className="etkinHucre";
huc12.className="etkinHucre";
huc13.className="etkinHucre";
huc14.className="etkinHucre";
huc21.className="etkinHucre";
huc31.className="etkinHucre";
huc41.className="etkinHucre";
huc42.className="etkinHucre";
huc43.className="etkinHucre";
huc44.className="etkinHucre";
huc54.className="etkinHucre";
huc64.className="etkinHucre";
huc71.className="etkinHucre";
huc72.className="etkinHucre";
huc73.className="etkinHucre";
huc74.className="etkinHucre";
break;
case 6:
temizle();
huc11.className="etkinHucre";
huc12.className="etkinHucre";
huc13.className="etkinHucre";
huc14.className="etkinHucre";
huc21.className="etkinHucre";
huc31.className="etkinHucre";
huc41.className="etkinHucre";
huc42.className="etkinHucre";
huc43.className="etkinHucre";
huc44.className="etkinHucre";
huc51.className="etkinHucre";
huc54.className="etkinHucre";
huc61.className="etkinHucre";
huc64.className="etkinHucre";
huc71.className="etkinHucre";
huc72.className="etkinHucre";
huc73.className="etkinHucre";
huc74.className="etkinHucre";
break;
case 7:
temizle();
huc11.className="etkinHucre";
huc12.className="etkinHucre";
huc13.className="etkinHucre";
huc14.className="etkinHucre";
huc24.className="etkinHucre";
huc34.className="etkinHucre";
huc44.className="etkinHucre";
huc54.className="etkinHucre";
huc64.className="etkinHucre";
huc74.className="etkinHucre";
break;
case 8:
temizle();
huc11.className="etkinHucre";
huc12.className="etkinHucre";
huc13.className="etkinHucre";
huc14.className="etkinHucre";
huc21.className="etkinHucre";
huc24.className="etkinHucre";
huc31.className="etkinHucre";
huc34.className="etkinHucre";
huc41.className="etkinHucre";
huc42.className="etkinHucre";
huc43.className="etkinHucre";
huc44.className="etkinHucre";
huc51.className="etkinHucre";
huc54.className="etkinHucre";
huc61.className="etkinHucre";
huc64.className="etkinHucre";
huc71.className="etkinHucre";
huc72.className="etkinHucre";
huc73.className="etkinHucre";
huc74.className="etkinHucre";
break;
case 9:
temizle();
huc11.className="etkinHucre";
huc12.className="etkinHucre";
huc13.className="etkinHucre";
huc14.className="etkinHucre";
huc21.className="etkinHucre";
huc24.className="etkinHucre";
huc31.className="etkinHucre";
huc34.className="etkinHucre";
huc41.className="etkinHucre";
huc42.className="etkinHucre";
huc43.className="etkinHucre";
huc44.className="etkinHucre";
huc54.className="etkinHucre";
huc64.className="etkinHucre";
huc74.className="etkinHucre";
break;
default:
}//switch
}//sayici
function temizle(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : .../.../2019 | 14:00
// Amaç : Sayfayi ilk konumuna döndürmek
// Giriş/Çıkış : yok
// Çağrıldığı yer : body.onload(), sayici()
/////////////////////////////////////////////////////////////////
var i=0,j=0;
for(i=1;i<8;i++){
for(j=1;j<5;j++){
var hedef=eval("huc" + i + j);
hedef.className="hucre";
}
}
}//temizle
function baslat(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : .../.../2019 | 13:50
// Amaç : Sayiciyi baslatir ve durdurur
// Giriş/Çıkış : yok
// Çağrıldığı yer : btnBaslat.click()
/////////////////////////////////////////////////////////////////
if(btnBaslat.value=="Başlat"){
btnBaslat.value="Durdur";
islemID=setInterval("sayici()",500);
}else{
btnBaslat.value="Başlat";
clearInterval(islemID);
}//if
}//baslat
</ script >
Sayfanın görsel olarak aynı olabilmesi için ise aşağıda verdiğim css kodlarını kullanmalısınız lakin farklı bir biçimlendirme yapmak istiyorsanız bu durumda istediğiniz css kodlarını kullanabilirsiniz.
<style type="text/css">
#baslikTD{
background-color:#eee;
color:gray;
text-align:center;
font-size:24px;
border:1px solid gray;
}
#tasarimciTD{
background-color:#ddd;
color:crimson;
text-align:right;
padding-right: 10px;
font-size:14px;
font-weight: bold;
border:1px solid gray;
}
#konumTD{
color:black;
background-color:#ddd;
text-align:left;
font-size:14px;
font-weight: bold;
border:1px solid gray;
padding-left: 10px;
}
.hucre{
width:45px;
height:45px;
border:1px solid gray;
background-color:#eee;
}
.etkinHucre{
width:45px;
height:45px;
border:1px solid gray;
background-color:#0066ff;
}
< / style>