JavaScript ile Tarih ve Saat Geri Sayımı Yapma

Merhaba arkadaşlar bugün sizlere javascript ile countdown yani geri sayım sayacı yapabilmeniz için düzenlemi olduğum bir javascript fonksiyonunu anlatacağım.

Belirli bir tarih ve saatten geri sayımı yaptırmak istiyorsanız aşağıdaki fonksiyonu javascript dosyasına ekliyorsunuz.

function CountDownTimer(dt)
 {
 var end = new Date(dt);

 var _second = 1000;
 var _minute = _second * 60;
 var _hour = _minute * 60;
 var _day = _hour * 24;
 var timer;

function showRemaining() {
 var now = new Date();
 var distance = end - now;
 if (distance < 0) {

 clearInterval(timer);
 document.getElementById('countdown').innerHTML = 'DOLDU!';

return;
 }
 var days = Math.floor(distance / _day);
 var hours = Math.floor((distance % _day) / _hour);
 var minutes = Math.floor((distance % _hour) / _minute);
 var seconds = Math.floor((distance % _minute) / _second);

 document.getElementById(id).innerHTML = days + ' gün ';
 document.getElementById(id).innerHTML += hours + ' saat ';
 document.getElementById(id).innerHTML += minutes + ' dakika ';
 document.getElementById(id).innerHTML += seconds + ' saniye';
 }

timer = setInterval(showRemaining, 1000);
 }

function CountDownTimer(dt)

{

var end = new Date(dt);

var _second = 1000;

var _minute = _second * 60;

var _hour = _minute * 60;

var _day = _hour * 24;

var timer;

function showRemaining() {

var now = new Date();

var distance = end - now;

if (distance < 0) {

clearInterval(timer);

document.getElementById('countdown').innerHTML = 'DOLDU!';

return;

}

var days = Math.floor(distance / _day);

var hours = Math.floor((distance % _day) / _hour);

var minutes = Math.floor((distance % _hour) / _minute);

var seconds = Math.floor((distance % _minute) / _second);

document.getElementById(id).innerHTML = days + ' gün ';

document.getElementById(id).innerHTML += hours + ' saat ';

document.getElementById(id).innerHTML += minutes + ' dakika ';

document.getElementById(id).innerHTML += seconds + ' saniye';

}

timer = setInterval(showRemaining, 1000);

}

Daha sonra html tarafında aşağıdaki kodu ekliyoruz.

<div id="countdown"></div>

1	<div id="countdown"></div>

Eğer div imizin id sini değiştirecek olursak yukarıdaki fonksiyonumuzda içinde de ayni şekilde yazılacağı document.getElementById(‘countdown’).innerHTML kısmında da id kısmının değiştirilmesi gerekmektedir.

bu kısımları tamamladıktan sonra fonskiyonumuzu istediğimiz yerde istediğimiz şekilde tarih ve saat değerlerini değişken olarak vererek kullanabiliriz. tarih ve saat geldiği ve geçtiği zaman ise onların yerine DOLDU! yazacaktır.

Örneğin CountDownTimer(’09/19/2018 10:1 AM’); şeklide fonsiyonumuzu çağırabiliriz. Bu sayede hızlıca bir countdown yapabilirsiniz.

4 Yorum

Gul

amp;lt; 0 şu nedir? 14cu siradaki

# 20 Şubat 2020 Yanıt
- yunusemrearac
  
  Küçüktür (<) işaretinin html kodu olarak geçmektedir. Code Viewer uygulamasından dolayı bozulmuş olacak tekrar düzenledim.
  
  # 20 Şubat 2020 Yanıt
yusuf

Hocam ben datei tarih şeklinde yazdım oldu amacım şu zaman bittiğinde şuanki date tarihinin üzerine 7 gün eklemesi nasıl yaparım epostama dönmeyi unutmayın

# 16 Mayıs 2020 Yanıt
- yunusemrearac
  
  Merhabalar, tarih kısmını date değişkenini oluştururken aşağıdaki gibi 7 gün ekleyerek devam edebilirsiniz.
  var date = new Date();
  date.setDate(date.getDate() + 7);
  
  # 17 Mayıs 2020 Yanıt

JavaScript ile Tarih ve Saat Geri Sayımı Yapma

4 Yorum

Bir yanıt yazın Yanıtı iptal et