Evet gençeler bu defa sizlerle birlikte setInterval(); fonksiyonunu kullanarak bir dijital saat kodlayacağız. Bu uygulamamızda da daha önce sizler kodladığımız 0-9 yukarı/aşağı sayıcı uygulamasında olduğu gibi < table > etiketini yani tablo nesnesini kullanacağız. Fakat burada en önemli nokta 0-9 arasındaki rakamların nasıl gösterileceği ki buna da siz daha önce kodladığımız desenKodlama uygulamasını kullanarak karar verebilirsiniz.Ben genel olarak 7x4 (satır x sutun) bir karakter şeklini kullandım ve 7x36 (satır x sutun) oluşan bir tabloda bu karakterleri görüntüledim. Sistem temel olarak şu şekilde işliyor:
-
Başlat düğmesine basıldığında baslat(); fonksiyonu çağrılır. Bu fonksiyon düğmeyi Durdur düğmesine dönüştürerek her saniyede bir zamanOku(); fonskiyonunu çağırmaya başlar.
-
zamanOku(); fonskiyonu saat, dakika ve saniye bilgilerini alarak ve gerekiyorsa iki basamaklı hale getirerek, yazdir(); fonskiyonuna elde ettiği zaman bilgisinin basamak bilgilerini gönderiyor.
-
yazdir(); fonksiyonu 7x36 (satır x sutun) oluşan bir tabloda bu karakterleri hucreleri renklendirerek görüntülüyor. Hücreler renklendirilirken .sari , .mavi, .kirmizi, .yesil, .siyah gibi sınıflar kullanılıyor ve bu sınıflar nesnesi kullanılarak değiştiriliyor.
-
yazdir(); fonksiyonu yazdırma işlemini tamamladıktan sonra bir sonraki zaman bilgisini yazdırmaya başlamadan önce temizle(); fonksiyonu çağrılarak tablonun tüm hücrelerinin zemin rengi varsayılan renk ile renklendiriliyor ve bu işlemler Durdur düğmesine basılana kadar tekrarlanmaya devam ediyor. clearInterval(); fonksiyonu ile tekrarlama işlemi sonlandırılıyor.
Uygulamanın ekran görüntüsü aşağıda verildiği gibidir.Bu uygulamayı geliştirmek tamamen size kullanılıyor tablo yerine 0-9 arasındaki dijitleri Grafik Animasyon dersinde öğrendiklerinizi kullanarak tasarlayarak görsel olarak daha güzel bir dijital saat hazırlayabilirsiniz.
Sayfanın HTML kodları aşağıda verildiği gibidir. Kodların uzunluğu gözününü korkutmasın zira büyük bir bölümünü 7x36' lık tablo oluşturuyor.
< 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 Dijital Saat< / td >
< / tr >
< tr >
< td colspan="3" height="90%" align="center" valign="middle" >
< !--Desen yapilacak tablo basi-- >
< 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 >
< td id="huc15" class="hucre" > < / td >
< td id="huc16" class="hucre" > < / td >
< td id="huc17" class="hucre" > < / td >
< td id="huc18" class="hucre" > < / td >
< td id="huc19" class="hucre" > < / td >
< td id="huc110" class="hucre" > < / td >
< td id="huc111" class="hucre" > < / td >
< td id="huc112" class="hucre" > < / td >
< td id="huc113" class="hucre" > < / td >
< td id="huc114" class="hucre" > < / td >
< td id="huc115" class="hucre" > < / td >
< td id="huc116" class="hucre" > < / td >
< td id="huc117" class="hucre" > < / td >
< td id="huc118" class="hucre" > < / td >
< td id="huc119" class="hucre" > < / td >
< td id="huc120" class="hucre" > < / td >
< td id="huc121" class="hucre" > < / td >
< td id="huc122" class="hucre" > < / td >
< td id="huc123" class="hucre" > < / td >
< td id="huc124" class="hucre" > < / td >
< td id="huc125" class="hucre" > < / td >
< td id="huc126" class="hucre" > < / td >
< td id="huc127" class="hucre" > < / td >
< td id="huc128" class="hucre" > < / td >
< td id="huc129" class="hucre" > < / td >
< td id="huc130" class="hucre" > < / td >
< td id="huc131" class="hucre" > < / td >
< td id="huc132" class="hucre" > < / td >
< td id="huc133" class="hucre" > < / td >
< td id="huc134" class="hucre" > < / td >
< td id="huc135" class="hucre" > < / td >
< td id="huc136" 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 >
< td id="huc25" class="hucre" > < / td >
< td id="huc26" class="hucre" > < / td >
< td id="huc27" class="hucre" > < / td >
< td id="huc28" class="hucre" > < / td >
< td id="huc29" class="hucre" > < / td >
< td id="huc210" class="hucre" > < / td >
< td id="huc211" class="hucre" > < / td >
< td id="huc212" class="hucre" > < / td >
< td id="huc213" class="hucre" > < / td >
< td id="huc214" class="hucre" > < / td >
< td id="huc215" class="hucre" > < / td >
< td id="huc216" class="hucre" > < / td >
< td id="huc217" class="hucre" > < / td >
< td id="huc218" class="hucre" > < / td >
< td id="huc219" class="hucre" > < / td >
< td id="huc220" class="hucre" > < / td >
< td id="huc221" class="hucre" > < / td >
< td id="huc222" class="hucre" > < / td >
< td id="huc223" class="hucre" > < / td >
< td id="huc224" class="hucre" > < / td >
< td id="huc225" class="hucre" > < / td >
< td id="huc226" class="hucre" > < / td >
< td id="huc227" class="hucre" > < / td >
< td id="huc228" class="hucre" > < / td >
< td id="huc229" class="hucre" > < / td >
< td id="huc230" class="hucre" > < / td >
< td id="huc231" class="hucre" > < / td >
< td id="huc232" class="hucre" > < / td >
< td id="huc233" class="hucre" > < / td >
< td id="huc234" class="hucre" > < / td >
< td id="huc235" class="hucre" > < / td >
< td id="huc236" 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 >
< td id="huc35" class="hucre" > < / td >
< td id="huc36" class="hucre" > < / td >
< td id="huc37" class="hucre" > < / td >
< td id="huc38" class="hucre" > < / td >
< td id="huc39" class="hucre" > < / td >
< td id="huc310" class="hucre" > < / td >
< td id="huc311" class="hucre" > < / td >
< td id="huc312" class="hucre" > < / td >
< td id="huc313" class="hucre" > < / td >
< td id="huc314" class="hucre" > < / td >
< td id="huc315" class="hucre" > < / td >
< td id="huc316" class="hucre" > < / td >
< td id="huc317" class="hucre" > < / td >
< td id="huc318" class="hucre" > < / td >
< td id="huc319" class="hucre" > < / td >
< td id="huc320" class="hucre" > < / td >
< td id="huc321" class="hucre" > < / td >
< td id="huc322" class="hucre" > < / td >
< td id="huc323" class="hucre" > < / td >
< td id="huc324" class="hucre" > < / td >
< td id="huc325" class="hucre" > < / td >
< td id="huc326" class="hucre" > < / td >
< td id="huc327" class="hucre" > < / td >
< td id="huc328" class="hucre" > < / td >
< td id="huc329" class="hucre" > < / td >
< td id="huc330" class="hucre" > < / td >
< td id="huc331" class="hucre" > < / td >
< td id="huc332" class="hucre" > < / td >
< td id="huc333" class="hucre" > < / td >
< td id="huc334" class="hucre" > < / td >
< td id="huc335" class="hucre" > < / td >
< td id="huc336" 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 >
< td id="huc45" class="hucre" > < / td >
< td id="huc46" class="hucre" > < / td >
< td id="huc47" class="hucre" > < / td >
< td id="huc48" class="hucre" > < / td >
< td id="huc49" class="hucre" > < / td >
< td id="huc410" class="hucre" > < / td >
< td id="huc411" class="hucre" > < / td >
< td id="huc412" class="hucre" > < / td >
< td id="huc413" class="hucre" > < / td >
< td id="huc414" class="hucre" > < / td >
< td id="huc415" class="hucre" > < / td >
< td id="huc416" class="hucre" > < / td >
< td id="huc417" class="hucre" > < / td >
< td id="huc418" class="hucre" > < / td >
< td id="huc419" class="hucre" > < / td >
< td id="huc420" class="hucre" > < / td >
< td id="huc421" class="hucre" > < / td >
< td id="huc422" class="hucre" > < / td >
< td id="huc423" class="hucre" > < / td >
< td id="huc424" class="hucre" > < / td >
< td id="huc425" class="hucre" > < / td >
< td id="huc426" class="hucre" > < / td >
< td id="huc427" class="hucre" > < / td >
< td id="huc428" class="hucre" > < / td >
< td id="huc429" class="hucre" > < / td >
< td id="huc430" class="hucre" > < / td >
< td id="huc431" class="hucre" > < / td >
< td id="huc432" class="hucre" > < / td >
< td id="huc433" class="hucre" > < / td >
< td id="huc434" class="hucre" > < / td >
< td id="huc435" class="hucre" > < / td >
< td id="huc436" 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 >
< td id="huc55" class="hucre" > < / td >
< td id="huc56" class="hucre" > < / td >
< td id="huc57" class="hucre" > < / td >
< td id="huc58" class="hucre" > < / td >
< td id="huc59" class="hucre" > < / td >
< td id="huc510" class="hucre" > < / td >
< td id="huc511" class="hucre" > < / td >
< td id="huc512" class="hucre" > < / td >
< td id="huc513" class="hucre" > < / td >
< td id="huc514" class="hucre" > < / td >
< td id="huc515" class="hucre" > < / td >
< td id="huc516" class="hucre" > < / td >
< td id="huc517" class="hucre" > < / td >
< td id="huc518" class="hucre" > < / td >
< td id="huc519" class="hucre" > < / td >
< td id="huc520" class="hucre" > < / td >
< td id="huc521" class="hucre" > < / td >
< td id="huc522" class="hucre" > < / td >
< td id="huc523" class="hucre" > < / td >
< td id="huc524" class="hucre" > < / td >
< td id="huc525" class="hucre" > < / td >
< td id="huc526" class="hucre" > < / td >
< td id="huc527" class="hucre" > < / td >
< td id="huc528" class="hucre" > < / td >
< td id="huc529" class="hucre" > < / td >
< td id="huc530" class="hucre" > < / td >
< td id="huc531" class="hucre" > < / td >
< td id="huc532" class="hucre" > < / td >
< td id="huc533" class="hucre" > < / td >
< td id="huc534" class="hucre" > < / td >
< td id="huc535" class="hucre" > < / td >
< td id="huc536" 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 >
< td id="huc65" class="hucre" > < / td >
< td id="huc66" class="hucre" > < / td >
< td id="huc67" class="hucre" > < / td >
< td id="huc68" class="hucre" > < / td >
< td id="huc69" class="hucre" > < / td >
< td id="huc610" class="hucre" > < / td >
< td id="huc611" class="hucre" > < / td >
< td id="huc612" class="hucre" > < / td >
< td id="huc613" class="hucre" > < / td >
< td id="huc614" class="hucre" > < / td >
< td id="huc615" class="hucre" > < / td >
< td id="huc616" class="hucre" > < / td >
< td id="huc617" class="hucre" > < / td >
< td id="huc618" class="hucre" > < / td >
< td id="huc619" class="hucre" > < / td >
< td id="huc620" class="hucre" > < / td >
< td id="huc621" class="hucre" > < / td >
< td id="huc622" class="hucre" > < / td >
< td id="huc623" class="hucre" > < / td >
< td id="huc624" class="hucre" > < / td >
< td id="huc625" class="hucre" > < / td >
< td id="huc626" class="hucre" > < / td >
< td id="huc627" class="hucre" > < / td >
< td id="huc628" class="hucre" > < / td >
< td id="huc629" class="hucre" > < / td >
< td id="huc630" class="hucre" > < / td >
< td id="huc631" class="hucre" > < / td >
< td id="huc632" class="hucre" > < / td >
< td id="huc633" class="hucre" > < / td >
< td id="huc634" class="hucre" > < / td >
< td id="huc635" class="hucre" > < / td >
< td id="huc636" 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 >
< td id="huc75" class="hucre" > < / td >
< td id="huc76" class="hucre" > < / td >
< td id="huc77" class="hucre" > < / td >
< td id="huc78" class="hucre" > < / td >
< td id="huc79" class="hucre" > < / td >
< td id="huc710" class="hucre" > < / td >
< td id="huc711" class="hucre" > < / td >
< td id="huc712" class="hucre" > < / td >
< td id="huc713" class="hucre" > < / td >
< td id="huc714" class="hucre" > < / td >
< td id="huc715" class="hucre" > < / td >
< td id="huc716" class="hucre" > < / td >
< td id="huc717" class="hucre" > < / td >
< td id="huc718" class="hucre" > < / td >
< td id="huc719" class="hucre" > < / td >
< td id="huc720" class="hucre" > < / td >
< td id="huc721" class="hucre" > < / td >
< td id="huc722" class="hucre" > < / td >
< td id="huc723" class="hucre" > < / td >
< td id="huc724" class="hucre" > < / td >
< td id="huc725" class="hucre" > < / td >
< td id="huc726" class="hucre" > < / td >
< td id="huc727" class="hucre" > < / td >
< td id="huc728" class="hucre" > < / td >
< td id="huc729" class="hucre" > < / td >
< td id="huc730" class="hucre" > < / td >
< td id="huc731" class="hucre" > < / td >
< td id="huc732" class="hucre" > < / td >
< td id="huc733" class="hucre" > < / td >
< td id="huc734" class="hucre" > < / td >
< td id="huc735" class="hucre" > < / td >
< td id="huc736" class="hucre" > < / td >
< / tr >
< / table >
< !-- Desen yapilacak tablo sonu -- >
< / td >
< / tr >
< tr >
< td height="5%" width="10%" id="konumTD" >< / td >
< td height="5%" width="80%" align="center" >
< input id="btnBaslat" class="btnAktif" type="button" value="Başlat" onclick="baslat()"/ >
< select id="tema" >
< option value="kirmizi" >Kırmızı< / option >
< option value="mavi" selected >Mavi< / option >
< option value="sari" >Sarı< / option >
< option value="yesil" >Yeşil< / option >
< option value="siyah" >Siyah< / option >
< / select >
< / td >
< td height="5%" width="10%" id="tasarimciTD" >www.bilalsert.com.tr< / td >
< / tr >
< / table >
< / body >
Uygulamanın çalışması için gerekli JavaScirpt kodlar aşağıda verdiğim gibidir. Kodların bu kadar uzun olmasının sebebi yazdır(); fonskiyonundaki 0-9 arasındaki rakamları kodlayan bölümdür. Bu bölümü yazmıyor deseKodlama uygulamasını kullanarak kodları elde ediyor buraya yapıştırıyoruz. Bu ve bunun gibi uygulamalar için desenKodlama uygulamasını yazmış idik.
<script type="text/javascript" language="javascript">
var islemID=0;
var sol=0;
function zamanOku(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : 01.10.2019 | 10:35
// Amaç : Sistem saatini okumak
// Giriş/Çıkış : yok
// Çağrıldığı yer :
/////////////////////////////////////////////////////////////////
var tarih= new Date();
var okunan="";
var i=0;
var temp="";
temp=tarih.getHours();
if(temp<10)temp="0" + temp;
okunan= temp+ ":";
temp=tarih.getMinutes();
if(temp<10)temp="0" + temp;
okunan += temp + ":";
temp=tarih.getSeconds();
if(temp<10)temp="0" + temp;
okunan += temp;
konumTD.innerHTML="< span style=\"color:red\">" + okunan + "< / span >";
temizle();
sol=0;
for(i=0;i<okunan.length;i++){
yazdir(okunan[i]);
konumTD.innerHTML=okunan;
if(sol>30)sol=1;else{
if(okunan[i]==":"){
sol+= 3;
}else if(okunan[i]==1){
sol+= 4;
}else sol+= 5;
}
}//for
}//zamanOku
function yazdir(gelen){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : 01.10.2019 | 10:30
// Amaç : tabloya desen basmak
// Giriş/Çıkış : yok
// Çağrıldığı yer :
/////////////////////////////////////////////////////////////////
var hedef;
var sinifAdi=tema.value;
var deger=parseInt(gelen);
//rakamlar basiliyor
switch(deger){
case 0:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 4)); hedef.className=sinifAdi;
break;
case 1:
//temizle();
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 3)); hedef.className=sinifAdi;
break;
case 2:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 4)); hedef.className=sinifAdi;
break;
case 3:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 4)); hedef.className=sinifAdi;
break;
case 4:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 3)); hedef.className=sinifAdi;
break;
case 5:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 4)); hedef.className=sinifAdi;
break;
case 6:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 4)); hedef.className=sinifAdi;
break;
case 7:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 4)); hedef.className=sinifAdi;
break;
case 8:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 4)); hedef.className=sinifAdi;
break;
case 9:
//temizle();
hedef=eval("huc1"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc1"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc2"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 1)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 3)); hedef.className=sinifAdi;
hedef=eval("huc4"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 4)); hedef.className=sinifAdi;
hedef=eval("huc7"+(sol + 4)); hedef.className=sinifAdi;
break;
default:
hedef=eval("huc2"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc3"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc5"+(sol + 2)); hedef.className=sinifAdi;
hedef=eval("huc6"+(sol + 2)); hedef.className=sinifAdi;
}//switch
}//sayici
function temizle(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : 30.09.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<37;j++){
var hedef=eval("huc" + i + j);
hedef.className="varsayilan";
//hedef.innerHTML= "< span style=\"color:red\">" + i +"< / span > : " + j;
}
}
}//temizle
function baslat(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : 30.09.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";
btnBaslat.className="btnPasif";
islemID=setInterval("zamanOku()",1000);
}else{
btnBaslat.value="Başlat";
btnBaslat.className="btnAktif";
clearInterval(islemID);
}//if
}//baslat
< / script>
Sayfamızın CSS kodları aşağıdaki gibidir; sınıf isimleri ve kullandığımız HTML nesnelerinin isimleri Türkçe olduğu için anlaşılmayacak bir nokta olduğunu düşünmüyorum zira sizlerle html nesnelerinin css özelliklerini derslerimizde uzun uzadıya işlemiş idik. Şimdi sizlerden bu uygulamayı bir adım öne götürerek harf ve rakamlardan oluşan rasgele uzunlukaki bir güvenlik kodu üreterek buna benzer bir tablo üzerinde görüntülemenizi bekliyorum.
<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;
}
.varsayilan{
width:45px;
height:45px;
border:1px solid gray;
background-color:#eee;
}
.mavi{
width:45px;
height:45px;
border:1px solid gray;
background-color:#0066ff;
}
.kirmizi{
width:45px;
height:45px;
border:1px solid gray;
background-color:red;
}
.yesil{
width:45px;
height:45px;
border:1px solid gray;
background-color:green;
}
.siyah{
width:45px;
height:45px;
border:1px solid gray;
background-color:#000;
}
.sari{
width:45px;
height:45px;
border:1px solid gray;
background-color:gold;
}
.btnAktif{
background-color: #6495ed;
width: 100px;
height: 30px;
padding: 3px 3px;
color:#fff;
font-weight: bold;
}
.btnPasif{
background-color: #ff0040;
width: 100px;
height: 30px;
padding: 3px 3px;
color:#fff;
font-weight: bold;
}
#tema{
background-color: yellow;
color:#333;
font-weight: bold;
height: 30px;
width: 100px;
}
style>