jquery-logo

jQuery ile Rakam Sayımı Yapmak

Merhaba arkadaşlar,
Bugünlü makalemde jQuery ile nasıl rakam sayımı yapabileceğimizi öğreneceğiz. Rakam sayımından kastımın ne olduğunu da hemen kısaca açıklayayım. Mesela geri sayım yapacağız. Başlangıç değerimiz 500 bitiş değerimiz 158. Sayfa açıldığında 500’den geriye sizin belirlediğiniz aralıklarla saymaya başlar. Aynı işlemi birkaç değişiklike 158’den 500’e kadar şeklinde de artacak şekilde uygulayabiliriz.
Öncelikle sayfamıza vazgeçilmez olan jquery kütüphanesi ekleyelim:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Şimdi öncelikle ilk yazağım kodda “0”dan başlayarak “500”e kadar saydıralım:

<script type="text/javascript">
    var maks = 500;// php ile yazdırın bu değeri
    $(function(){
     ileriSayim();
    });
    function ileriSayim() {
     var deger = parseInt($('#sayac').html());
     $('#sayac').text(deger+1);
     // Üst ve alt satırdaki +1'i arttırarak sayacın kaçarlı sayılacağını belirtiyoruz
     if (deger+1 != maks) {
      setTimeout('ileriSayim()',50);
     }
     if(deger<=maks){
       $('#sayac').text(maks);
     }
    }
</script>

// Bu kısmı sayacın görünmesini istediğiniz yere yazın
<div id="sayac">0</div>

Aynı şekilde bu sayaş kodun da bir kaç değişiklik yaparak 500’den 0’a doğru saydıralım:

<script type="text/javascript">
    var min= 0;// php ile yazdırın bu değeri

    $(function(){
     geriSayim();
    });
    function geriSayim() {
     var deger = parseInt($('#sayac').html());
     $('#sayac').text(deger-1);
     // Üst ve alt satırdaki -1'i azaltarak sayacın kaçarlı sayılacağını belirtiyoruz
     if (deger-1 != min) {
      setTimeout('geriSayim()',50);
     }
     if(deger>=maks){
       $('#sayac').text(min);
     }
    }
</script>

// Bu kısmı sayacın görünmesini istediğiniz yere yazın
<div id="sayac">500</div>

Umarım faydalı ve anlaşılır bir çalışma olmuştur.

Post Author: Oral ÜNAL

Web geliştirmeyi başta meslek olarak hayal eden fakat daha sonra bir hobi haline getiren birisiyim işte.

jQuery ile Rakam Sayımı Yapmak” için bir yorum

  • Servis

    (20 Ekim 2016 - 10:10)

    Malesef Wp içinde deneme yaptım kodlar wp içinde çalışmıyor

Yorum yazma sırası sizde!