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.

</p>
<p>function CountDownTimer(dt)<br />
 {<br />
 var end = new Date(dt);</p>
<p> var _second = 1000;<br />
 var _minute = _second * 60;<br />
 var _hour = _minute * 60;<br />
 var _day = _hour * 24;<br />
 var timer;</p>
<p>function showRemaining() {<br />
 var now = new Date();<br />
 var distance = end - now;<br />
 if (distance &amp;amp;lt; 0) {</p>
<p> clearInterval(timer);<br />
 document.getElementById('countdown').innerHTML = 'DOLDU!';</p>
<p>return;<br />
 }<br />
 var days = Math.floor(distance / _day);<br />
 var hours = Math.floor((distance % _day) / _hour);<br />
 var minutes = Math.floor((distance % _hour) / _minute);<br />
 var seconds = Math.floor((distance % _minute) / _second);</p>
<p> document.getElementById(id).innerHTML = days + ' gün ';<br />
 document.getElementById(id).innerHTML += hours + ' saat ';<br />
 document.getElementById(id).innerHTML += minutes + ' dakika ';<br />
 document.getElementById(id).innerHTML += seconds + ' saniye';<br />
 }</p>
<p>timer = setInterval(showRemaining, 1000);<br />
 }</p>
<p>

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

</p>
<p>&lt;div id=&quot;countdown&quot;&gt;&lt;/div&gt;</p>
<p>

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.

Bir Cevap Yazın