Butona Tıklandığında Geri Sayım Sayacı Oluşturma (JavaScript)

Web projelerinde kullanıcı etkileşimini artırmak için geri sayım sayaçları sıkça kullanılır ⏳
Özellikle form gönderimi, SMS doğrulama, indirme işlemleri veya bekleme süreleri için buton üzerinde geri sayım göstermek, hem şık hem de kullanıcı dostu bir çözümdür.

Bu rehberde, butona tıklandığında geri sayım başlatan ve sayaç değerini doğrudan buton üzerinde gösteren pratik bir kod örneğini adım adım inceleyeceğiz.

Geri Sayım Sayacı Oluşturma

Amacımız buton oluşturup, kullanıcı bu butona tıkladığında geri sayım sayacının aktif olması ve sayaç bitiminde istediğimiz eylemin gerçekleşmesi.

📌 Bu Kod Ne İşe Yarar?

Bu örnek sayesinde:

• Butona tıklandığında geri sayım başlar
• Buton pasif hale gelir
• Sayaç saniye saniye buton üzerinde görünür
• Süre bitince buton tekrar aktif olur

Yani kullanıcı, beklemesi gereken süreyi net şekilde görür 👀

🧱 HTML Yapısı

Bu kısımda siz kullanmak istediğiniz butona id olarak “countdownBtn” eklemeniz yeterli. Örneğin iletişim formunda butona bunu eklemek için butona id olarak “countdownBtn” girin.

<button id="countdownBtn">Gönder</button>

Ya da indirme butonunda bu id vermelisiniz.

🎨 CSS Kısmı

Burası size bağlı. Kendinize göre görsel giydirme yapabilirsiniz. Ya da temanızın button için ayarlı stilini kullanabilirsiniz. Verdiğim style kodu ile alttaki resimde ki gibi bir görüntüye sahip olacak butonunuz.

#countdownBtn {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.35);
    transition: 
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.3s ease;
}

/* Hover efekti */
#countdownBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.45);
    background: linear-gradient(135deg, #4338ca, #4f46e5);
}

/* Tıklama anı */
#countdownBtn:active:not(:disabled) {
    transform: scale(0.97);
}

/* Geri sayım (disabled) durumu */
#countdownBtn:disabled {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    box-shadow: none;
    cursor: not-allowed;
    animation: pulse 1.2s infinite;
}

/* Hafif nabız animasyonu */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.75;
    }
    100% {
        opacity: 1;
    }
}

⚙️ JavaScript – Geri Sayım Mantığı

Asıl iş burada başlıyor 🚀

Bu kodu </body> etiketinden önceye ekleyin.

Eğer WordPress kullanıyorsanız footer.php dosyasını FileZilla programı ile açın. Alt kısımda </body> etiketinden hemen önce ekleyin.

Butona tıklanınca 10 saniyelik geri sayım başlatıyoruz:

const btn = document.getElementById("countdownBtn");
let countdown;
let timeLeft = 10;

btn.addEventListener("click", function () {
    btn.disabled = true;
    timeLeft = 10;
    btn.textContent = timeLeft + " saniye";

    countdown = setInterval(() => {
        timeLeft--;
        btn.textContent = timeLeft + " saniye";

        if (timeLeft <= 0) {
            clearInterval(countdown);
            btn.disabled = false;
            btn.textContent = "Gönder";
        }
    }, 1000);
});

⏳ 10 saniye değil de daha fazla ya da daha az yapmak isterseniz timeLeft = 10 kısmıda ki 10 değerini değiştirin.

🧠 Kodun Çalışma Mantığı

Kısaca bu JavaScript kodunu özetlemek gerekirse:

• setInterval() ile her saniye geri sayım azalır
• Sayaç değeri textContent ile butona yazılır
• Süre bittiğinde clearInterval() çalışır
• Buton eski haline döner

Bu yapı sayesinde ekstra alan kullanmadan, sade bir çözüm elde edersin ✅

👨‍💻 Sitenizde denemeden önce Online Css Html Javascript Editörü kullanarak kolayca deneme yapabilirsiniz.

📱 Nerelerde Kullanılabilir?

Bu yöntemi şu alanlarda rahatlıkla kullanabilirsin:

• 📩 Form gönderme sonrası bekleme süresi
• 📲 SMS / e-posta doğrulama butonları
• ⏬ Dosya indirme gecikmeleri
• 🛑 Spam tıklamayı önleme

⭐ Geliştirme Önerileri

İstersen şu eklemeleri de yapabilirsin:

• Süreyi dinamik hale getirme
• Progress bar ekleme
• LocalStorage ile sayacı hatırlatma
• CSS animasyonlarıyla zenginleştirme

📌 Sonuç olarak Butona tıklandığında geri sayım sayacı oluşturup bunu buton üzerinde göstermek, hem kullanıcı deneyimini artırır hem de profesyonel bir görünüm sağlar 💡
Bu rehberde paylaşılan kodu dilediğin projeye kolayca uyarlayabilirsin.

🫸 Sayfanın sağına ya da soluna reklam kodları eklemek için Sayfanın Soluna ve Sağına Reklam Alanı Eklemek adlı içeriği inceleyininz.

🐭 Sayfada kopyalama yapmayı engellemek için Javascript ile Yazı Seçmeyi ve Kopyalamayı Engelleme adlı içeriği inceleyiniz.