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:
[sourcecode lang=”html”]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>[/sourcecode]
Şimdi öncelikle ilk yazağım kodda “0”dan başlayarak “500”e kadar saydıralım:
[sourcecode lang=”html”]<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>[/sourcecode]
Aynı şekilde bu sayaş kodun da bir kaç değişiklik yaparak 500’den 0’a doğru saydıralım:
[sourcecode lang=”html”]<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>[/sourcecode]
Umarım faydalı ve anlaşılır bir çalışma olmuştur.