Bu yazımızda javascript ile saat uygulaması yapacağız, son dönemlerde, güzel grafiklerle gösterişli geri sayım uygulamaları yapılmaktadır. Burdaki mantığı iyice anladıktan sonra, CSS ve HTML bilgilerinizle siz de bu tip uygulamaları rahatça yapabilirsiniz.
Yapacağımız iş, Date() nesnesini kullanarak, saat dakika ve saniye değerlerini çekmek (getHours, getMinutes, getSeconds), ve bu uygulamanın her saniye de bir tekrar çalışmasını sağlamaktır (setInterval veya setTimeout ile).
Önemli bir diğer konu ise, sayfa yüklendiğinde fonksiyonun çalışır hale gelmesidir. Bunu da isterseniz html body etiketi içine "onload" fonksiyonunu koyarak <body onload="startTime()">, ya da javascript kodunuzun içine "window.onload" yapısını koyarak gerçekleştirebilirsiniz.
Kodlarımız ve satırların açıklamaları aşağıdadır:
<script type="text/javascript">
window.onload = startTime;
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
h=checkTime(h);
m=checkTime(m);
s=checkTime(s);
document.getElementById('saat').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',1000);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
Saatimizin gösterildiği alanı da aşağıdaki kod ile belirliyoruz.
<p id="saat"></p>
Açıklamalar:
- 2. window.onload = startTime; ile sayfa yüklendiğinde startTime() metodunun çalışmasını sağlıyoruz.
- 3. Esas fonksiyonumuz: startTime()
- 5. today = new Date(); ile Date nesnemizi oluşturuyoruz
- 6.,7.,8. saat, dakika ve saniye değerlerini çekiyoruz
- 10.,11.,12. Çektiğimiz değerler 10'dan küçükse başına 0 eklemek için "checkTime" metodunu çağırıyoruz (Ör:03:02:02)
- 13. "Id" değeri "saat" olan üyenin HTML değerini, elde ettiğimiz değerler olarak belirliyoruz
- 14. setTimeout() metoduyla, her saniyede bir fonksiyonun tekrar çağrılmasını sağlıyoruz
- 17. Sayı değerlerinin 10'dan küçük olup olmadığını kontrol eden checkTime metodu
CSS ve html etiketler kullanarak bu saat uygulamasını daha gösterişli hale getirebilirsiniz...
Kolay gelsin, görüşmek üzere...
