Öncelikle sayaç kodunu HTML dosyasına eklemeliyiz. Sayaç kodunu aşağıdaki şekilde ekleyebilirsiniz.
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.
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></script>
<script></script>
Son olarak da HTML kodlarımızın altına yazacağımız kodları görüyoruz.
<script>
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.
