Javascript ile Sayaç (Kronometre) Yapımı

Bu yazımda javascript ile sayaç (kronometre) yapımını inceleyeceğiz. Aslında bu olayı incelememim amacı: jqeury ile yapacağım uygulamalarda belli zaman aralıklarda değişim gösteren bir yapı kullanacak olmam. Örnek verecek olursam; belli aralıklarla değişen fotoğraf slaytı uygulaması, haber başlıklarının belli aralıklarla değişmesi uygulaması gibi uygulamalar. Bunları yapmadan önce bu zamanlama olayını iyi anlamak için en basit örnek olan sayaç (kronometre) uygulamasına göz atalım.

Aslında bu uygulamayı yapmak için jquery kullanmamıza gerek yok. Javascript içinde hazır bulunan fonksiyonları kullanacağız. Ancak daha iyi kullanım için jquery ile kallanacağım. Sayaç uygulamasının script kodlarına bakacak olursak:

<script type="text/javascript">
  var saniye = 0, dakika = 0, saat = 0;
  function bak()
  {
    if(saniye < 59) saniye = saniye + 1;
    else
    {
      saniye = 0; 
      if(dakika < 59) dakika = dakika + 1;
      else{dakika = 0; saat = saat + 1;}
    }
    $("#sure").html(saat + " : " + dakika + " : " + saniye);
  }
  $(document).ready(function(){
    $("#sure").html("0 : 0 : 0");
    setInterval(bak, 1000);
  });
</script>

Görüldüğü javascript içinde bulunan setInterval fonksiyonu ile belli aralıkta çalıştıracağımız fonksiyonu belirliyoruz. Ayrıca zaman aralığını da kendimiz belirtebiliyoruz. setInterval fonksiyonu belirli zaman aralıklarında istenilen fonksiyonu çalıştırır. Bunun yanında setTimeout fonksiyonu ise bir seferliğine olmak üzere belirlediğimiz fonksiyonu belli süre geçtikten sonra çalıştırır. Bu fonksiyonun kullanımı da setInterval fonksiyonu ile aynıdır. Bu fonksiyonlar ile çok değişik uygulamalar geliştirebiliriz. Microsoft`un ajax uygulamarında kullandığı timer fonksiyonu da buna benzer olmalıdır. Yaptığım sayaç ugyulamasını aşağıda çalışır halde görebilirsiniz.


Google ile gelen arama sonuçları:

  • javascript kronometre
  • javascript kronometre yapimi
  • javascript sayaç yapımı
  • geri sayan kronometre
  • javascript ile kronometre
  • javascript ile kronometre yapımı
  • kronometre sayaç
  • jquery sayaç
  • geri sayan kronometre devresi yapımı
  • jquery sayaç yapımı

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir