JavaScript ile Sayaç (Counter App) Yapımı – Adım Adım Rehber

 

JavaScript ile Sayaç (Counter App) Yapımı – Adım Adım Rehber

JavaScript ile Sayaç Yapımı: Adım Adım Rehber (Giriş)

Giriş: Sayaçlar Neden Önemlidir?

Web uygulamaları günümüzde dinamik içerikler ve kullanıcı etkileşimleriyle öne çıkıyor. JavaScript, bu dinamikliği sağlamak için vazgeçilmez bir araçtır. JavaScript sayaç yapımı, özellikle zamanlayıcı, ziyaretçi sayacı, geri sayım ve tıklama takibi gibi işlevlerde sıkça tercih edilen bir uygulamadır.

Bu makalede, temel seviyeden başlayarak ileri seviyeye kadar adım adım JavaScript ile sayaç yapımını ele alacağız. Ayrıca SEO uyumlu olarak kod örnekleriyle zenginleştirilmiş, görsellerle desteklenmiş bir içerik sunacağız.

JavaScript Sayaç Nedir?

JavaScript sayaç, belirli bir değeri artıran, azaltan veya zamanla güncelleyen bir fonksiyondur. Sayaçlar, aşağıdaki amaçlarla kullanılabilir:

  • Geri sayım sayaçları (ör. kampanya bitişi)

  • Tıklama sayaçları (ör. butona kaç kez tıklandı)

  • Süre sayaçları (ör. kaç saniye geçti)

  • Ziyaretçi sayaçları

HTML ile Sayaç Taslağının Oluşturulması

İlk olarak, temel bir HTML iskeleti oluşturarak sayaç arayüzünü hazırlıyoruz:

html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Sayaç</title>
</head>
<body>
  <h1>JavaScript Sayaç Örneği</h1>
  <div id="sayac">0</div>
  <button onclick="arttir()">Arttır</button>
  <button onclick="azalt()">Azalt</button>
  <button onclick="sifirla()">Sıfırla</button>

  <script src="sayac.js"></script>
</body>
</html>

Bu yapı ile ekranda sayaç değeri ve üç adet buton (arttır, azalt, sıfırla) gösterilir.

JavaScript ile Sayaç Fonksiyonlarının Yazılması

HTML tarafını tamamladıktan sonra sıra geldi JavaScript kodlarını yazmaya. sayac.js adında bir dosya oluşturarak sayaç işlemlerini gerçekleştireceğiz.

javascript

let sayac = 0;

function arttir() {
  sayac++;
  document.getElementById("sayac").innerText = sayac;
}

function azalt() {
  sayac--;
  document.getElementById("sayac").innerText = sayac;
}

function sifirla() {
  sayac = 0;
  document.getElementById("sayac").innerText = sayac;
}

Bu fonksiyonlar sayesinde kullanıcı butonlara bastıkça sayaç değerini kontrol edebilir.

CSS ile Basit Tasarım

Kullanıcı deneyimini artırmak için biraz CSS dokunuşu yapabiliriz:

html

<style>
  #sayac {
    font-size: 48px;
    margin: 20px;
    color: #333;
  }

  button {
    font-size: 18px;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
  }
</style>

Bu stil sayesinde sayaç daha okunabilir hale gelir, butonlar ise daha şık görünür.

Geri Sayım Sayacı Yapımı

Geri Sayım Nedir?

Geri sayım (countdown), belirlenen bir hedef tarihe kadar geçen süreyi saniye, dakika, saat ve gün formatında gösteren sayaçlardır. Web sitelerinde genellikle kampanyalar, ürün lansmanları veya etkinlik duyuruları için kullanılır. JavaScript ile bu tür sayaçları yapmak oldukça kolay ve etkilidir.

Geri Sayım Sayacı HTML Taslağı

İlk olarak, geri sayım sayaç yapısı için basit bir HTML şablonu oluşturalım:

html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Geri Sayım Sayacı</title>
  <style>
    #geriSayim {
      font-size: 36px;
      color: #e63946;
    }
  </style>
</head>
<body>
  <h2>Etkinlik Başlangıcına Kalan Süre:</h2>
  <div id="geriSayim"></div>

  <script src="gerisayim.js"></script>
</body>
</html>

Bu yapıda geri sayımın gösterileceği bir <div> alanı oluşturduk.

JavaScript ile Geri Sayım Fonksiyonu

Şimdi gerisayim.js dosyasına aşağıdaki JavaScript kodlarını yazalım:

javascript

const hedefTarih = new Date("May 1, 2025 00:00:00").getTime();

const geriSayimFonksiyonu = setInterval(function() {
  const simdi = new Date().getTime();
  const fark = hedefTarih - simdi;

  const gun = Math.floor(fark / (1000 * 60 * 60 * 24));
  const saat = Math.floor((fark % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const dakika = Math.floor((fark % (1000 * 60 * 60)) / (1000 * 60));
  const saniye = Math.floor((fark % (1000 * 60)) / 1000);

  document.getElementById("geriSayim").innerHTML =
    gun + "g " + saat + "s " + dakika + "d " + saniye + "sn ";

  if (fark < 0) {
    clearInterval(geriSayimFonksiyonu);
    document.getElementById("geriSayim").innerHTML = "Etkinlik başladı!";
  }
}, 1000);

Açıklamalar:

  • new Date("May 1, 2025 00:00:00"): Geri sayımın biteceği tarih.

  • setInterval(): Her 1 saniyede bir çalışarak sayacı günceller.

  • Math.floor(): Tam sayı elde etmek için kullanılır.

  • Sayaç sıfıra ulaştığında mesaj değiştirilir ve sayaç durdurulur.

SEO Açısından Geri Sayım Sayaçları

Geri sayım sayaçları, ziyaretçilerin ilgisini çektiği için dönüşüm oranlarını artırabilir. Ancak dikkat edilmesi gereken noktalar şunlardır:

  • JavaScript'e bağımlı olmayan alternatif içerik: Arama motorları bazen JavaScript'le oluşturulmuş içerikleri tam göremeyebilir. Bu yüzden <noscript> etiketi içinde sabit bilgi eklenebilir.

  • Sayfa hızını etkilememeli: Sayaç kodları sade ve optimize edilmiş olmalı.

  • Mobil uyumluluk: Geri sayım mobil cihazlarda da düzgün görünmelidir.

Örnek <noscript> kullanımı:

html

<noscript>
  Etkinlik 1 Mayıs 2025 tarihinde başlayacak.
</noscript>

Geri Sayım Uygulamasına Görsellik Eklemek

Sayaç daha çekici hale getirilebilir. Örnek animasyonlu CSS ile:

css

#geriSayim {
  font-family: 'Courier New', monospace;
  background: #f1faee;
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
  animation: yanipson 1s infinite;
}

@keyframes yanipson {
  0% { background-color: #f1faee; }
  50% { background-color: #ffebcd; }
  100% { background-color: #f1faee; }
}

Bu animasyon, geri sayımın dikkat çekmesini sağlar.


Otomatik Artan Sayaç Yapımı

Otomatik Sayaç Nedir?

Otomatik artan sayaçlar, bir sayının sürekli olarak artmasını sağlayan dinamik sayaçlardır. Genellikle bir kullanıcı sayfasını açtığında devreye girer ve belirli bir aralıkla artış gösterir. Zaman bazlı sayaç, animasyonlu rakamlar veya canlı veri gösterimleri için oldukça popülerdir.

Temel HTML ve CSS Yapısı

Öncelikle sayaç alanı için basit bir HTML ve CSS şablonu hazırlayalım:

html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Otomatik Artan Sayaç</title>
  <style>
    #otomatikSayac {
      font-size: 48px;
      color: #1d3557;
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>Ziyaret Süresi:</h2>
  <div id="otomatikSayac">0</div>

  <script src="otomatiksayac.js"></script>
</body>
</html>

JavaScript ile Sayaç Mantığı

Şimdi otomatik artan sayacın JavaScript kodlarını otomatiksayac.js dosyasına yazalım:

javascript

let sure = 0;

const sayac = setInterval(function() {
  sure++;
  document.getElementById("otomatikSayac").innerText = sure + " saniye";
}, 1000);

Bu kod sayesinde kullanıcı sayfayı açtığı andan itibaren her saniyede bir sure değişkeni 1 artacak ve ekrana yazdırılacaktır.

Alternatif: Milisaniye, Dakika ve Saat Formatı

Eğer daha profesyonel bir görünüm istiyorsanız, süreyi saat, dakika, saniye olarak da gösterebilirsiniz:

javascript

let zaman = 0;

setInterval(() => {
  zaman++;

  const saat = Math.floor(zaman / 3600);
  const dakika = Math.floor((zaman % 3600) / 60);
  const saniye = zaman % 60;

  document.getElementById("otomatikSayac").innerText =
    `${saat.toString().padStart(2, '0')}:${dakika.toString().padStart(2, '0')}:${saniye.toString().padStart(2, '0')}`;
}, 1000);

Bu sürüm, ziyaretçinin ne kadar süredir sayfada kaldığını klasik saat formatında (ör. 00:03:15) gösterir.

Yerel Depolama (localStorage) ile Sayaç Saklama

localStorage Nedir?

localStorage, tarayıcıya veri kaydetmeye yarayan bir Web API'dir. Bu sayede sayfa yenilense, hatta tarayıcı kapatılıp açılsa bile veriler silinmez. Sayaç gibi değerlerin korunması için oldukça kullanışlıdır.

HTML Şablonu

Daha önceki örneğimizi kullanabiliriz, sadece JavaScript tarafını güncelleyeceğiz. Yine aşağıdaki gibi bir sayaç göstergemiz olacak:

html

<div id="localSayac">0</div>
<button onclick="arttir()">Arttır</button>
<button onclick="sifirla()">Sıfırla</button>

JavaScript ile localStorage Entegrasyonu

javascript

let sayac = localStorage.getItem("sayac") 
            ? parseInt(localStorage.getItem("sayac")) 
            : 0;

document.getElementById("localSayac").innerText = sayac;

function arttir() {
  sayac++;
  localStorage.setItem("sayac", sayac);
  document.getElementById("localSayac").innerText = sayac;
}

function sifirla() {
  sayac = 0;
  localStorage.setItem("sayac", sayac);
  document.getElementById("localSayac").innerText = sayac;
}

Açıklamalar:

  • localStorage.getItem("sayac"): Daha önce kayıtlı bir sayaç değeri varsa getirir.

  • localStorage.setItem("sayac", sayac): Her güncellemede sayaç değerini kaydeder.

  • parseInt(): String olarak gelen değeri sayıya çevirir.

Neden localStorage Kullanmalı?

  • Veri kaybını önler. (Sayfa yenilenmesinden etkilenmez)

  • Kullanıcı deneyimini artırır.

  • Daha gelişmiş sayaç sistemlerinin temelini oluşturur.

  • Offline çalışan sayaçlar yapılabilir.

  • Kampanya sürelerini kullanıcı bazında izlemeye yardımcı olur

localStorage Kullanarak Sayaç Değeri Saklama

1. HTML Yapısı:

html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>localStorage Sayaç</title>
</head>
<body>
  <h2>Sayaç (Kalıcı):</h2>
  <div id="kaliciSayac">0</div>
  <button onclick="arttir()">Arttır</button>
  <button onclick="sifirla()">Sıfırla</button>

  <script src="kalicisayac.js"></script>
</body>
</html>

2. JavaScript (kalicisayac.js):

javascript

let sayac = localStorage.getItem("sayac") || 0;
document.getElementById("kaliciSayac").innerText = sayac;

function arttir() {
  sayac++;
  localStorage.setItem("sayac", sayac);
  document.getElementById("kaliciSayac").innerText = sayac;
}

function sifirla() {
  sayac = 0;
  localStorage.setItem("sayac", sayac);
  document.getElementById("kaliciSayac").innerText = sayac;
}

Açıklamalar:

  • localStorage.getItem("sayac"): Saklanan değeri alır.

  • localStorage.setItem("sayac", sayac): Güncel değeri saklar.

  • Sayfa her yüklendiğinde sayaç kaldığı yerden devam eder.

SEO Açısından localStorage’ın Faydası

localStorage doğrudan SEO’ya etki etmez çünkü arama motorları JavaScript tarafından değiştirilen kullanıcı verilerini genellikle dizine eklemez. Ancak:

  • Kullanıcı deneyimini geliştirir, bu da dolaylı olarak SEO’ya katkı sağlar.

  • Sayfa içi etkileşimi artırır (bounce rate düşer).

  • İçeriklerin yeniden yüklenmeden kullanılabilmesini sağlar.

Alternatif: sessionStorage Kullanımı

Eğer verinin sadece kullanıcı oturumu boyunca saklanması isteniyorsa, sessionStorage da tercih edilebilir. Farkları şu şekildedir:

ÖzelliklocalStoragesessionStorage
SüreklilikKalıcıOturum süresince
Sekmeler arasıPaylaşılırPaylaşılmaz
Kapandıktan sonraSaklanırSilinir

Örnek:

javascript

sessionStorage.setItem("sayac", 5);
let sayac = sessionStorage.getItem("sayac");

Uygulama Fikri: Günlük Giriş Takibi Sayacı

Gelişmiş bir uygulama olarak, kullanıcı sitenize kaç kez giriş yaptı? Hangi tarihte en son girdi? Bunları da sayabilirsiniz:

javascript

let girisSayisi = localStorage.getItem("girisSayisi") || 0;
girisSayisi++;
localStorage.setItem("girisSayisi", girisSayisi);
document.getElementById("kaliciSayac").innerText = `Bu senin ${girisSayisi}. girişin!`;


Event Listener ile Sayaç Yapımı


setTimeout ve setInterval Nedir?


FonksiyonAçıklama
setTimeout()Belirli bir süre sonra sadece bir kez çalışır.
setInterval()Belirli aralıklarla tekrar tekrar çalışır.


Sayaç yapımında genellikle setInterval() tercih edilir çünkü biz zamanın akmasını istiyoruz.




setInterval ile Otomatik Sayaç


1. HTML Kodu


html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>setInterval Sayaç</title>
  <style>
    #zamanSayac {
      font-size: 36px;
      color: #e76f51;
      margin: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>setInterval ile Otomatik Sayaç</h2>
  <div id="zamanSayac">0</div>

  <script src="intervalsayac.js"></script>
</body>
</html>





2. JavaScript Kodu (intervalsayac.js)


javascript

let saniye = 0;

const zamanlayici = setInterval(() => {
  saniye++;
  document.getElementById("zamanSayac").innerText = saniye + " sn";
}, 1000);



    

  • 

    Burada setInterval her 1000 milisaniyede (1 saniye) bir çalışır.
    

    • 

  • 

    Sayaç saniye++ ile artar.
    

    • 





setTimeout ile Gecikmeli Sayaç Başlatma


Sayaç hemen başlamasın, örneğin 3 saniye sonra başlasın istiyorsan:


javascript

setTimeout(() => {
  setInterval(() => {
    saniye++;
    document.getElementById("zamanSayac").innerText = saniye + " sn";
  }, 1000);
}, 3000);



Bu örnekte sayaç, 3 saniye sonra başlar.




Sayaç Durdurma: clearInterval Kullanımı


Otomatik çalışan sayaçları durdurmak için clearInterval() kullanılır.


javascript

let sayac = 0;
let intervalID;

function baslat() {
  intervalID = setInterval(() => {
    sayac++;
    document.getElementById("zamanSayac").innerText = sayac;
  }, 1000);
}

function durdur() {
  clearInterval(intervalID);
}



Ve HTML tarafına butonlar eklersin:


html

<button onclick="baslat()">Başlat</button>
<button onclick="durdur()">Durdur</button>





Gelişmiş Sayaç: Başlat - Durdur - Sıfırla


Tüm fonksiyonları bir arada kullanmak için:


html

<div id="zamanSayac">0</div>
<button onclick="baslat()">Başlat</button>
<button onclick="durdur()">Durdur</button>
<button onclick="sifirla()">Sıfırla</button>



javascript

let sayac = 0;
let zamanID;

function guncelle() {
  document.getElementById("zamanSayac").innerText = sayac;
}

function baslat() {
  if (!zamanID) {
    zamanID = setInterval(() => {
      sayac++;
      guncelle();
    }, 1000);
  }
}

function durdur() {
  clearInterval(zamanID);
  zamanID = null;
}

function sifirla() {
  durdur();
  sayac = 0;
  guncelle();
}





SEO Açısından Zamanlayıcı Sayaçlar


Bu sayaçlar:


    

  • Sayfada geçirilen süreyi artırır.
    

    • 

  • Kullanıcının dikkatini çeker.
    

    • 

  • Kampanya sayaçları gibi dönüşüm oranını yükselten etkileşimli içerikler sağlar.
    

    • 

  • SEO açısından dolaylı faydaları büyüktür.
    

    • 





Bonus: Geri Sayım Sayacı


Eğer ileri değil de geri sayım istersen, örnek:


javascript

let kalan = 10;

const geriSayim = setInterval(() => {
  if (kalan === 0) {
    clearInterval(geriSayim);
    alert("Süre doldu!");
  } else {
    document.getElementById("zamanSayac").innerText = kalan;
    kalan--;
  }
}, 1000);



Animasyonlu Sayaç (Count Up Effect) Nedir?


Count Up Effect, 
bir sayının sıfırdan veya başka bir değerden başlayarak hedef değere kadar hızlı bir 
şekilde artarak animasyonlu biçimde gösterilmesidir.


Kullanım Alanları:


    

  • Kurumsal sitelerde başarı göstergeleri
    

    • 

  • Landing page’lerde satış ya da indirme sayıları
    

    • 

  • Bağış kampanyaları
    

    • 

  • Dashboard gösterimleri
    

    • 





Basit Count Up Animasyonu – Vanilla JavaScript ile


1. HTML Kodu


html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Animasyonlu Sayaç</title>
  <style>
    .sayac {
      font-size: 48px;
      color: #264653;
      font-weight: bold;
      text-align: center;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div class="sayac" id="countUp">0</div>

  <script src="countup.js"></script>
</body>
</html>





2. JavaScript Kodu – countup.js


javascript

function animasyonluSayac(elementID, hedef, sure) {
  const sayac = document.getElementById(elementID);
  let baslangic = 0;
  const aralik = 50; // 50ms aralıklarla güncelle
  const artim = hedef / (sure / aralik);

  const sayacInterval = setInterval(() => {
    baslangic += artim;
    if (baslangic >= hedef) {
      baslangic = hedef;
      clearInterval(sayacInterval);
    }
    sayac.innerText = Math.floor(baslangic);
  }, aralik);
}

animasyonluSayac("countUp", 1500, 2000); // 1500’e kadar 2 saniyede say





Kod Açıklamaları:


    

  • elementID: Sayacın bulunduğu elementin ID’si.
    

    • 

  • hedef: Ulaşılacak değer.
    

    • 

  • sure: Animasyonun toplam süresi (ms cinsinden).
    

    • 

  • artim: Her adımda artacak miktar.
    

    • 



Bu yapı sayesinde saniyeler içinde hedef sayıya ulaşılırken, kullanıcı etkileşimi üst düzeye çıkar.




Gelişmiş Count Up: Virgüllü Sayılar ve Para Formatı


javascript

function formatliSayac(elementID, hedef, sure) {
  const sayac = document.getElementById(elementID);
  let baslangic = 0;
  const aralik = 30;
  const artim = hedef / (sure / aralik);

  const sayacInterval = setInterval(() => {
    baslangic += artim;
    if (baslangic >= hedef) {
      baslangic = hedef;
      clearInterval(sayacInterval);
    }
    sayac.innerText = Math.floor(baslangic).toLocaleString("tr-TR");
  }, aralik);
}

formatliSayac("countUp", 45678, 3000);



Çıktı:


45.678 şeklinde gösterilir. Özellikle gelir, 
ziyaretçi gibi değerlerde bu biçim kullanılır.

Dış Kütüphane Alternatifi: countUp.js


Eğer kendi animasyon yazmak istemiyorsan countUp.js gibi harici kütüphanelerle de hızlıca entegre edebilirsin.


CDN ile Kullanım:


html

<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>



Uygulama:


javascript

const sayaç = new CountUp('countUp', 12345);
sayaç.start();

Geri Sayım (Countdown) Nedir?


Geri sayım sayaçları, belirlenen bir gelecek tarih ve saate kadar olan süreyi saniye saniye geriye doğru gösterir. Hedef zaman geldiğinde genellikle bir mesaj gösterilir ya da bir işlem başlatılır (örneğin: sayfa yönlendirme, formu kapatma vs.).




Geri Sayım Sayacı Uygulaması


1. HTML Kodu


html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Geri Sayım Sayacı</title>
  <style>
    .geriSayim {
      font-size: 36px;
      text-align: center;
      margin-top: 40px;
      color: #e63946;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2 style="text-align:center;">Etkinlik Başlangıcına Kalan Süre</h2>
  <div class="geriSayim" id="geriSayimTimer">Yükleniyor...</div>

  <script src="gerisayim.js"></script>
</body>
</html>





2. JavaScript Kodu – gerisayim.js


javascript

const hedefTarih = new Date("2025-12-31T23:59:59").getTime();

const timer = setInterval(() => {
  const simdi = new Date().getTime();
  const fark = hedefTarih - simdi;

  const gun = Math.floor(fark / (1000 * 60 * 60 * 24));
  const saat = Math.floor((fark % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const dakika = Math.floor((fark % (1000 * 60 * 60)) / (1000 * 60));
  const saniye = Math.floor((fark % (1000 * 60)) / 1000);

  document.getElementById("geriSayimTimer").innerHTML =
    `${gun}g ${saat}s ${dakika}d ${saniye}sn`;

  if (fark < 0) {
    clearInterval(timer);
    document.getElementById("geriSayimTimer").innerHTML = "Etkinlik Başladı!";
  }
}, 1000);





Açıklamalar:


    

  • new Date("..."): Hedef tarih ve saat.
    

    • 

  • getTime(): Milisaniye cinsinden zaman farkı.
    

    • 

  • setInterval(): Her saniyede bir geri sayımı günceller.
    

    • 

  • Tarih dolunca sayaç durur ve mesaj gösterilir.
    

    • 





Dinamik Geri Sayım (Kullanıcıdan Tarih Alarak)


Form aracılığıyla kullanıcı bir tarih girebilir ve o tarihe kadar geri sayım başlatılabilir:


html

<input type="datetime-local" id="kullaniciTarih">
<button onclick="baslatGeriSayim()">Başlat</button>
<div id="geriSayimSonuc"></div>



javascript

function baslatGeriSayim() {
  const tarihInput = document.getElementById("kullaniciTarih").value;
  const hedef = new Date(tarihInput).getTime();

  const interval = setInterval(() => {
    const simdi = new Date().getTime();
    const fark = hedef - simdi;

    if (fark <= 0) {
      clearInterval(interval);
      document.getElementById("geriSayimSonuc").innerText = "Süre doldu!";
      return;
    }

    const saniye = Math.floor((fark / 1000) % 60);
    const dakika = Math.floor((fark / 1000 / 60) % 60);
    const saat = Math.floor((fark / 1000 / 60 / 60) % 24);
    const gun = Math.floor(fark / (1000 * 60 * 60 * 24));

    document.getElementById("geriSayimSonuc").innerText =
      `${gun} gün ${saat} saat ${dakika} dakika ${saniye} saniye kaldı`;
  }, 1000);
}



Geri Sayımda Ek Özellikler


    

  • Sesli uyarı eklenebilir (Audio API)
    

    • 

  • Geri sayım bitince sayfa yönlendirmesi yapılabilir:
    

    javascript

    if (fark < 0) {
  window.location.href = "etkinlik.html";
}

    

🔄 Mobil Uyumlu Sayaçlar: Responsive Tasarım


Mobil kullanıcılar web trafiğinin büyük kısmını oluşturur. Sayaçların tüm cihazlarda doğru görünmesi, kullanıcı deneyimi (UX) açısından kritiktir.


1. CSS ile Responsive Yapı


css

.sayac {
  font-size: 10vw;
  text-align: center;
  padding: 20px;
}



    

  • 

    vw birimi sayesinde ekran boyutuna göre yazı boyutu dinamik ayarlanır.
    

    • 

  • 

    flexbox veya grid yapıları da mobil uyum için kullanılabilir.
    

    • 



2. Viewport Meta Tag


html

<meta name="viewport" content="width=device-width, initial-scale=1.0">



Bu etiketi eklemek, mobil uyumun temel taşıdır.




🛡️ Hata Kontrolü ve Güvenlik Önlemleri


Küçük projelerde genelde göz ardı edilse de, sayaç yapımında bazı hatalara karşı önlem alınmalıdır:


1. Tarih Bozulması


javascript

if (isNaN(hedefTarih)) {
  alert("Geçersiz tarih formatı!");
  return;
}



2. Sayacın Bitmeden Yeniden Başlatılması


javascript

clearInterval(varsaMevcutInterval);



3. DOM öğesi kontrolü


javascript

const eleman = document.getElementById("countUp");
if (!eleman) return;



Bu tür kontroller, JavaScript hatalarının önüne geçer.




⚙️ JavaScript Sayaçlarını Frameworklerde Kullanmak


1. React ile Sayaç (Hook Kullanımı)


jsx

import { useEffect, useState } from 'react';

function Sayac() {
  const [saniye, setSaniye] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSaniye(s => s + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>{saniye} saniye geçti.</div>;
}



    

  • 

    useEffect ile bileşen yüklendiğinde sayaç başlar.
    

    • 

  • 

    Temizleme fonksiyonu ile gereksiz yükten kurtulursun.
    

    • 



2. Vue.js ile Sayaç


vue

<template>
  <div>{{ saniye }} saniye</div>
</template>

<script>
export default {
  data() {
    return { saniye: 0 };
  },
  mounted() {
    setInterval(() => {
      this.saniye++;
    }, 1000);
  }
};
</script>





🔍 SEO’ya Etkileri


Sayaçlar doğrudan arama motorlarında indekslenmez ama dolaylı SEO katkısı çok büyüktür:


1. Hemen Çıkma Oranını Azaltır


Sayaçlar kullanıcıyı sayfada tutar ve daha fazla etkileşim sağlar.


2. Etkileşimli İçerik ile UX Artışı


Kullanıcı deneyimi arama motorlarının algoritmasında yer alır. Sayaçlar, sitenin “canlı” olduğunu gösterir.


3. Microdata veya Meta Tag ile Desteklenebilir


html

<meta name="description" content="JavaScript ile sayaç nasıl yapılır? Geri sayım, animasyonlu sayaç örnekleri ve SEO katkılarıyla detaylı rehber.">



4. AMP Uyumlu Sayaçlar


Google AMP destekli içeriklerde özel sayaç bileşenleri ile mobil uyumlu ve SEO dostu çözümler geliştirilebilir.




✅ Sonuç: JavaScript ile Sayaç Yapmak


JavaScript ile sayaç yapmak:


    

  • Hem basit hem etkili bir UX çözümüdür.
    

    • 

  • Kod öğrenenler için harika bir egzersizdir.
    

    • 

  • Pazarlama ve veri gösterimi açısından çok kullanışlıdır.
    

    • 



Sayaç projeleriyle aşağıdakileri pekiştirmiş olursun:


    

  • Zaman işlemleri (Date, setInterval)
    

    • 

  • Koşul ifadeleri
    

    • 

  • DOM manipülasyonu
    

    • 

  • Olay yönetimi
    

    • 

  • Responsiveness ve UX optimizasyonu
    

    • 





❓ Sık Sorulan Sorular (FAQ)


1. Sayaç için hangi JavaScript fonksiyonları kullanılır?


    

  • setInterval(), setTimeout(), Date() en temel fonksiyonlardır.
    

    • 



2. Sayaçlar sayfa yenilendiğinde sıfırlanır mı?


Evet. Kalıcı hale getirmek için localStorage veya sunucu taraflı kayıt gerekir.


3. Sayaç mobil cihazlarda neden kayıyor?


CSS responsive değilse, yazı fontu ya da padding büyükse ekran taşması olabilir.


4. Sayaç bitince ne yapılabilir?


Mesaj gösterilebilir, sayfa yönlendirmesi yapılabilir, arka planda API çağrısı başlatılabilir.


5. Sayaçla e-posta veya form tetiklenebilir mi?


Evet. Sayaç süresi dolunca JavaScript ile form gönderilebilir veya kullanıcı uyarılabilir.




🧠 Ekstra Tavsiyeler


    

  • requestAnimationFrame() ile çok daha akıcı animasyonlar yapılabilir.
    

    • 

  • Canvas veya SVG ile grafik sayaçlar da geliştirilebilir.
    

    • 

  • Performans için sayaçlar throttle veya debounce ile optimize edilebilir.
    

    • 







🔔 Sonuç olarak, JavaScript ile sayaç yapmak hem yeni başlayanlar için öğretici, 
hem de profesyonel projelerde oldukça fonksiyonel bir araçtır. 
Gerek ileri sayım, 
gerekse geri sayım özellikleriyle kullanıcı deneyimini zirveye taşıyabilirsin.
Yorumlar