Geri Sayım (Countdown)

Bu gönderide; eylemin tetiklendiği zamana +2 dakika ekleyip geri sayım gerçekleştiren sayacın kod bloklarını paylaşıp açıklıyorum.

•  
• p {
• text-align: center;
• font-size: 60px;
• }
•  

Sayacın gösterileceği paragraf için doküman içi dahili stil kod blokları eklenir. Sonrasında dokümana, “demo" id değerine sahip paragraf eklenir ve script bloğu yazılır.

•  
•  
  • var countDownDate = new Date();
  • countDownDate.setMinutes(countDownDate.getMinutes()+2)
  • var x = setInterval(function() {
    • var now = new Date().getTime();
    • var distance = countDownDate - now;
    • var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    • var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    • minutes==0 ? minutes="" : minutes+="d ";
    • if(seconds==0){
      • document.getElementById("demo").innerHTML =minutes;
    • }
    • else{
      • document.getElementById("demo").innerHTML =minutes + seconds + "s ";
    • }
• if (distance < 1) {
• clearInterval(x);
• document.getElementById("demo").innerHTML = "BİTTİ";
• }
• }, 1000);
•  

Script kod bloğunda new Date ile tarih bilgisi oluşturulur. oluşturulan tarihe setMinutes fonksiyonu ile, getMinutes fonksiyonundan alınan dakika bilgisine +2 parametresi verilerek tarihe +2 dakika eklenir. setInterval ile her 1 saniyede koşturulacak olan kod blokları yazılır. Bu kod bloğunda koşturulan zamanın milisaniye değeri alınır. Aradaki fark için; Bir önceki adımda +2 eklenen zamandan koşturulan zamanın milisaniye değeri çıkarılır. Elde edilen çıkarımın dakika ve saniye bilgileri, mod alma işleminin tabana yuvarlanması ile elde edilir ve paragraf bilgisine yazdırılır. Eğer elde edilen çıkarım 1'den (1 saniyeden) küçükse sayaç sonlandırılır ve paragrafa sonuç bilgisi yazılır.

Kaynakça => https://www.w3schools.com/howto/howto_js_countdown.asp