İçerikler
JavaScript kullanarak başlangıç değerinden bitiş değerine kadar geçiş animasyonuyla birlikte bir sayaç yapacağız. Javascript Sayaç işlemleri için genel anlamda setInterval fonksiyonunu kullanıyor olacağız. Hazırlayacağımız örneğin nasıl bir şey olacağına ilişkin olarak aşağıdaki görsele bakabilirsiniz. Görsel GIF olarak hazırlandığı için bir yavaşlık söz konusu. Yaptığınız kodlar daha hızlı bir şekilde, takılmadan işlem görecektir.
Bu işlemi sağlayabilmek için şu adımları takip edebilirsiniz:
Html Kodları
HTML sayfasında bir div elementi oluşturun ve sayacın değerini bu element içinde gösterin.
<div id="sayac">0</div>
Javascript Kodları
JavaScript dosyasında başlangıç değerini ve bitiş değerini belirleyin. Ayrıca, geçiş süresini ve adım sayısını belirleyin.
var baslangicDegeri = 0; var bitisDegeri = 100; var gecisSuresi = 2000; //ms cinsinden var adimSayisi = 100;
Geçiş animasyonunu oluşturmak için bir zamanlayıcı (setInterval) kullanın. Her adımda sayacın değerini artırın ve HTML sayfasındaki div elementinde gösterin. Ayrıca, animasyonun sonunda zamanlayıcıyı durdurun.
var adimMiktari = (bitisDegeri - baslangicDegeri) / adimSayisi;
var sayacDegeri = baslangicDegeri;
var adimSayaci = 0;
var zamanlayici = setInterval(function() {
sayacDegeri += adimMiktari;
document.getElementById("sayac").innerHTML = Math.round(sayacDegeri);
adimSayaci++;
if (adimSayaci >= adimSayisi) {
clearInterval(zamanlayici);
document.getElementById("sayac").innerHTML = bitisDegeri;
}
}, gecisSuresi / adimSayisi);
Bu adımları uygulayarak başlangıç değerinden bitiş değerine kadar geçiş animasyonuyla birlikte bir sayıcı oluşturabilirsiniz.
Kodların Tamamı
Hazırlamış olduğumuz kodları bir araya getirerek, tam çalışır halini paylaşayım. Bu kodları bir .html dosyasına yazarak test edebilirsiniz.
<div id="sayac">0</div>
<script>
var baslangicDegeri = 0;
var bitisDegeri = 100;
var gecisSuresi = 2000; //ms cinsinden
var adimSayisi = 100;
var adimMiktari = (bitisDegeri - baslangicDegeri) / adimSayisi;
var sayacDegeri = baslangicDegeri;
var adimSayaci = 0;
var zamanlayici = setInterval(function() {
sayacDegeri += adimMiktari;
document.getElementById("sayac").innerHTML = Math.round(sayacDegeri);
adimSayaci++;
if (adimSayaci >= adimSayisi) {
clearInterval(zamanlayici);
document.getElementById("sayac").innerHTML = bitisDegeri;
}
}, gecisSuresi / adimSayisi);
</script>
Bu şekilde hazırladığınızda başlangıç noktasından, bitiş noktasına kadar ilerleyen bir sayaç yapmış olacaksınız. Web sitenizin, istatistikler kısmında bu uygulamayı kullanabilirsiniz.
Css Kodları
Bu uygulamanın daha iyi görünmesi için bir kaç css kodları da ekleyebiliriz. Tabi bu örneğin daha iyi görünmesini sağlayacaktır.
#sayac{padding: 10px; border: 1px solid #ddd; border-radius: 10px; font-size:30px; width: 100px; margin: 50px auto;text-align: center; font-weight: bold;}
Bu şekilde ekleyeceğimiz basit bir css koduyla birlikte, daha şık bir css sayacı eklemiş oluyoruz.
