Geri sayım uygulaması oluşturmak

Web sitemizde veya uygulamamız içerisinde bir geri sayım uygulamasına ihtiyaç duyabiliriz, bu durumda JavaScript ile geri sayım uygulaması oluşturmak çok kolay ve istenirse jQuery yada Vanilla JS de kullanılabilir.

Öncelikle saf JS ile yapımı sonrasında jQuery ile yapımını örnek olarak göstereceğim.

Saf JS

2022’ye kadar geri sayım yapacak, 2022 olduğunda hoş geldin 2022 uyarısı verecek. 2022 geçtikten sonra hoşça kal 2022 uyarısı verecek.

const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hour');
const minsEl = document.getElementById('mins');
const secondsEl = document.getElementById('seconds');

const countdown = "1 Jan 2022";

function countdownApp(){
  const countdownDate = new Date(countdown);
  const currentDate = new Date();

  const totalseconds = (countdownDate - currentDate) / 1000;

  const days = Math.floor(totalseconds / 3600 / 24);
  const hour = Math.floor(totalseconds / 3600) % 24;
  const mins = Math.floor(totalseconds / 60) %60;
  const seconds = Math.floor(totalseconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = formatTime(hour);
  minsEl.innerHTML = formatTime(mins);
  secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time){
  return time < 10? `0${time}` : time;
}

countdownApp();

setInterval(countdownApp, 1000);

Örnek kodlar:

Buradan test edebilirsiniz: https://countdown-app.glitch.me/

jQuery ile

Sayfayı açılışından 5 dakika sonra register butonu deaatif olacak.

function startTimer(duration, display){
    var timer = duration, minutes, seconds;
    setInterval(function (){
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0){
            timer = duration;
       }
   }, 1000);
}

jQuery(function ($){
    var fiveMinutes = 60 * 5,
        display = $('#time');
    startTimer(fiveMinutes, display);
});

Örnek kodlar:

Buradan test edebilirsiniz: https://countdown-jquery.glitch.me/

Kaynak: https://stackoverflow.com/questions/20618355/how-to-write-a-countdown-timer-in-javascript

Alternatif olarak başarılı ve basir bir jQuery eklentisi olan “The Final Countdown(jQuery.countdown)” kullanabilirsiniz.

Bu arada Messagerimus isimli uygulama hoşunuza gidebilir, bu uygulama istediğiniz zaman kurup o zamanda bir email göndermeye yarıyor, yani geleceğe mesaj atabiliyorsunuz. Dilerseniz bu email/mesajı şifleyebilir veya public/halka açık olarak da gönderebilirsiniz. Messagerimus ile birden fazla kişiye mail gönderilebilir ve gönderilerin bir URL’i vardır.

Umarım işinize yarar ve bir fikir verir, beni Twitter’dan takip etmeyi unutmayın!