jQuery ile Artan/Azalan Sayaç Yapımı

Sayılar, biz farkına varmasak da web sitelerimizin önemli bir kısmında yer almaktadır. Yazıların okunma sayısı, dosyaların indirilme sayısı, ürünlerin fiyatları ve web sitelerin daha birçok yerinde sayısal veriler kullanılmaktadır. Günümüz internet sitelerinde durağan tasarımlardan çok dinamik tasarımlar ilgi gördüğünden sayılar da bunların dışında bırakılamazdı. jQuery sayesinde en basit şekilde nasıl artan veya azalan bir sayaç yapabiliriz görelim.

Öncelikle sayaç kodunu HTML dosyasına eklemeliyiz. Sayaç kodunu aşağıdaki şekilde ekleyebilirsiniz.

<b class="timer" id="sayac" data-from="1" data-to="99" data-speed="5000"></b>

Buradaki sayacımız bize 1’den başlayıp 99’a kadar sayma işlemini yapacaktır. Görüldüğü üzere data-from değeri sayacın başlangıç değerini, data-to değeri ise sayacın bitiş değerini alır. data-speed değerini açıklamadan geçiyorum zira onu ve diğer tüm değerleri yazının son kısmında açıklayacağım.

Örnekte olduğu gibi tekrar butonu eklemek isterseniz de HTML dosyanızda aşağıdaki kodu kullanabilirsiniz.

<button class="restart" data-target="#sayac">Tekrar</button>

Yukarıdaki kodla da tekrarlama işlemini yapıyoruz. data-target değeri tekrarlanacak sayac ismini -yukarıdaki etikette sayacımızın ismini “sayac” olarak kullanmıştık burada da aynı değeri verdik- alır.

Sıra geldi javascript dosyalarımızı çağırmaya. İlk dosya kütüphaneden, ikinci dosya ise sunucunuzdan çağırılmaktadır. Kodları görelim.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countTo.js"></script>

Son olarak da HTML kodlarımızın altına yazacağımız kodları görüyoruz.

<script type="text/javascript">
jQuery(function ($) {
$('.timer').each(count);
// Tekrar butonuna tıklandığında
$('.restart').click(function (event) {
event.preventDefault();
var target = $(this).data('target');
count.call($(target));
});
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
</script>

Şimdi size sözünü verdiğim bölüme bakalım. Sayacımızın default değerlerini sunucunuzdaki javascript dosyasından düzenleyebilirsiniz. Örneği aşağıdadır, açıklama satırını yanlarına eklediğim için tekrar açıklamaya gerek duymuyorum.

from: 0, // Başlangıç değeri
to: 0, // Hedef değer
speed: 1000, // Sayaç hızı
refreshInterval: 100, // Güncellenme zamanı
decimals: 0, // Tam sayı hassasiyeti
formatter: formatter, // Format ayarları
onUpdate: null, // Yenilendiğinde yapılacaklar
onComplete: null // Tamamlandığında yapılacaklar

En basit hali ile bu şekilde kullanabilirsiniz. Demo sayesinde daha iyi anlayabileceğinizi ve daha detaylı bilgilere ulaşabileceğinizi düşünüyorum.

Demoİndir

22.04.2014 JavaScript 9 yorum

, , ,

9 yorum

mbo15.07.2014

Kardeşim öncelikle teşekkür ederim.
Ama ben sayfayı her yenilediğimde tekrar aynı yerden başlıyor mantık olarak. Bunun devamlı akmasını nasıl sağlayabiliriz? Yani sabit durmadan artacak…

Harun Korkmaz15.07.2014

@mbo Öncelikle teşekkür ederim. :)

Sayfayı her yenileyişinizde tekrar yüklendiği için her defasında başlangıç değerini okuyarak saymaya başlıyor. Bunun için başlangıç değeriniz değişken olmalıdır. “countdown” kelimesini aratarak ulaşabileceğiniz sonuçların size ilham vereceğini düşünüyorum.

hake10.08.2014

Merhaba, istediğim gibi makale buldum derken işin içinden çıkamadım. : ) Ben aynen şunu yapmak istiyorum. “Başlat” butonuna basıldığı zaman arka planda süre başlasın ve belli bir zaman sonra “durdur” butonuna basılınca aradaki geçen zamanı sadece dakika olarak nasıl gösterebilirim? başlat dendiği zaman süre görünmeyecek ama durdur dediği geçen süre görülecek.

Yardımızı bekliyorum, şimdiden teşekkürler.

Harun Korkmaz10.08.2014

Merhaba @hake
Senin için jQuery ile kronometre yapımı ile ilgili bir örnek hazırladım. Üzerinde dilediğin değişikliği yaparak kullanmak istediğin şekilde kullanabilirsin. Örneğe ulaşmak için jQuery ile Kronometre Yapımı adresini ziyaret edebilirsin.

Serkan Yıldırım12.11.2015

Merhaba,
 
Öncelikle bu faydalı makale için teşekkür ederim.
 
Yapmak istediğim uygulama, input’a veri girilmeye başlandığı anda sayacı başlatmak veri girişi tamamlandığında sayacı durdurarak verinin kaç saniyede girildiğini hesaplayabilmek. Söz gelimi bir ödeme sayfası olduğunu düşünelim. Kullanıcının kart numarasını kaç saniyede girdiğini hesaplayıp değişkene aktarmak istiyorum.
 
Bu konuda bana yol gösterebilirsen çok sevinirim.
 
Teşekkür ederim.

Harun Korkmaz12.11.2015

Merhaba @Serkan

Senin de yapmak istediğin uygulama için jQuery ile Kronometre Yapımı sayfasını ziyaret etmeni öneririm. Kronometre için kullanılan örnek sana bir yol gösterecektir.

serdar mete07.09.2016

Merhaba ,
Benim yapmak istediğim şeyi örnek ile anlatayım ;
Mesela 4000 TL lik bir hedef var ve her satış yapıldığında bu hedeften düşecek. Sonunda da hedefi tutturdun falan gibi bir yazı çıkacak. Bunu wallboard a vermek istiyorum. Nasıl yapabilirim.

Harun Korkmaz10.09.2016

Merhaba @serdar mete,
Bu iş için yazılım şirketlerinden destek alabilirsin ya da vakit ayırarak bu konu ile ilgili bunun gibi daha fazla makale okuyarak bilgi edinebilirsin.

kirikkale haber14.03.2017

Teşekkürler, bir ara bu tarz bişey aramıştım sayenizde halloldu ,tekrardan teşekkürler.

Yorum Yazın

kod.gen.tr