JavaScript ile Mesai Sayacı

Javascript Geri Sayım Sayacı Countdown Timer

Bu çalışmamda JavaScript ile bir geri sayım sayacı yaptım.

Input elemanına bitiş zamanını yazıp butona tıkladığınızda belirlediğiniz saate kaç saat kaldığını görebilirisiniz. Bu uygulamada input elemanına yapılan girişleri sınırlandırdım. Program klavyeden girilen değerin sayısal olup olmadığını kontrol ediyor ve girilen değerleri saat formatına göre HH:MM:SS şeklinde düzenliyor. Javascript mesai sayacının kodları aşağıdaki gibidir.

<p>Lütfen mesai bitiş saatini girin</p>
<input type="tel" placeholder="HH:MM:SS" id="timeInputId" />
<input type="button" id="tmrBtn" value="Mesai Sayacını Başlat"/>
<p id="demo"></p>
<p id="demo2"></p>
 
<script>
var x;
var finishTime= "00:00:00";
var brTitle= document.title;
window.addEventListener("load",function(){
var timeBtn = document.getElementById("tmrBtn");
var timeInput = document.getElementById("timeInputId");

timeInput.onkeydown=function(e){
      
    if(!isNaN(e.key)){
     clearInterval(x);
          if(this.value.length == 2)
          {
              this.value=this.value+":";
          }
          if(this.value.length == 5)
          {
              this.value=this.value+":";
          }
          if(this.value.length >= 8)
          {
              this.value=this.value.substring(0,8);
          }
      }
      else{
      	this.value="";
        
      }
    };
    timeBtn.onclick=function(){
    if(timeInput.value.length >= 8)
        {
        timeInput.value=timeInput.value.substring(0,8);
        	finishTime=timeInput.value;
            startTmr();
        }
    	
    };

});

function startTmr(){
finishTime =finishTime.split(":");
var ft =new Date();
 finishTime=ft.setHours(finishTime[0],finishTime[1],finishTime[2]);

var countDownDate = finishTime;

x = setInterval(function() {

var now = new Date().getTime();
    
   var distance = countDownDate - now;
    
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    if(hours < 10) hours="0"+hours;
     if(minutes < 10) minutes="0"+minutes;
     if(seconds < 10) seconds="0"+seconds;

document.getElementById("demo").innerHTML ="Mesai Bitimi İçin Ayarlanan Tarih : "+ft+"<br/> Mesai Bitimine Kalan Süre:<br/> <h2 style='color:red;text-align:center;'>"+   hours + " : "
  + minutes + " : " + seconds+" </h2>";
  if(!document.hasFocus()){
   document.title ="Kalan Süre : "+hours +":"+minutes+":"+seconds;
  }
  else{
  document.title=brTitle;
  }

if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Mesai Bitti";
	document.title="Mesai Bitti";
  }
}, 1000);

}

</script>

Kodları yazarken https://www.w3schools.com/howto/howto_js_countdown.asp linkindeki sayfadan yararlandım

Kodun çalışan örneğini buraya ekliyorum. Dilerseniz günün bir saatini girip kalan sürenin geriye doğru sayılmasını deneyimleyebilirsiniz.

Lütfen mesai bitiş saatini girin

Bu Blogda Ara

Turgut Arslan

JavaScript ile Mesai Sayacı

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Google Maksimum Performans Kampanyalarından Maksimum Dönüşüm Nasıl Alınır?

Luhn Algoritmasıyla Kredi Kartı Validasyon Kontrolü

JavaScript ile TC No Üretelim