JavaScript ile doğum gününe kalan zamanın hesaplanması

Daha önce setInterval fonksiyonunu kullanmadıysanız aşağıdaki örnek ile pekiştirebilirsiniz. Bu fonksiyon verilen bir zaman aralığında istediğiniz fonksiyonun otomatik çalışmasını sağlıyor. Örneğin saniyede bir çalışmasını isterseniz 1000 değerini veriyorsunuz, buradaki 1000 milisaniye cinsinden değer.

setInterval(function(){

     //Yapılacak işler

},1000);

Sayfa yüklendiğinde pageLoad fonksiyonu aşağıdaki şekilde çalıştırılıyor. Bu fonksiyon içinde id değeri basla olan butona tıklayınca Hesapla fonksiyonunun çalışmasını sağlıyoruz.

  window.onload = pageLoad;

  function pageLoad() {
                var startButton = document.getElementById("basla");
                startButton.onclick = Hesapla;

            }



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doğum günü hesabı </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <style>
        #zaman{
            width:600px;
            height: 70px;
            font-size:40px;
            text-align:center;
            background-color: blueviolet;
            color:#FFF;
            margin: 0 auto;
        }
        #bilgiForm{
            margin-top: 20px;
            margin-bottom: 10px;
            border:1px solid  #CCC;
            padding:10px 10px 10px 30px;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        }
        #baslik{font-size:20px;
                font-weight: bold;
                text-align:center;}
    </style>

    <script>

        window.onload = pageLoad;

            function pageLoad() {
                var startButton = document.getElementById("basla");
                startButton.onclick = Hesapla;

            }

            function Hesapla() {
             x= setInterval(function(){
                gun= parseInt(document.getElementById('txtGun').value);
                ay= parseInt(document.getElementById('txtAy').value);
                yil= parseInt(document.getElementById('txtYil').value);
                saat= parseInt(document.getElementById('txtSaat').value);
                dakika= parseInt(document.getElementById('txtDakika').value);
                saniye= parseInt(document.getElementById('txtSaniye').value);
                dogumGunu = new Date(yil,ay-1,gun,saat,dakika,saniye).getTime();

            var simdi = new Date().getTime();
            var fark = dogumGunu - simdi;
            var gunler = Math.floor(fark/(1000*60*60*24));
            var saatler = Math.floor((fark%(1000*60*60*24))/(1000*60*60));
            var dakikalar = Math.floor((fark%(1000*60*60))/(1000*60));
            var saniyeler = Math.floor((fark%(1000*60))/1000);
            document.getElementById("zaman").innerHTML = gunler + " gün "
            + saatler + " saat "
            + dakikalar + " dk. "
            + saniyeler + " sn. ";
            
            if (fark < 0) {
                clearInterval(x);
                document.getElementById("zaman").innerHTML = "DOĞUM GÜNÜN KUTLU OLSUN";
            }


            },1000);
            }
    
    </script>
</head>
<body>
    <div id="demo"></div>


<div class="container ">
  <div class="col-md-4 offset-4">
    <div id="bilgiForm">
        <h3 id="baslik">Doğum gününüz</h3>
        <div class="form-group row">
          <label for="gun" class="col-sm-2 col-form-label">Gün</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="txtGun" value="15">
          </div>
        </div>
        <div class="form-group row mt-2">
            <label for="gun" class="col-sm-2 col-form-label">Ay</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="txtAy" value="2">
            </div>
          </div>
          <div class="form-group row mt-2">
            <label for="gun" class="col-sm-2 col-form-label">Yıl</label>
            <div class="col-sm-8 ">
              <input type="text" class="form-control" id="txtYil" value="2024">
            </div>
          </div>
          <div class="form-group row mt-2">
            <label for="gun" class="col-sm-2 col-form-label">Saat</label>
            <div class="col-sm-8 ">
              <input type="text" class="form-control" id="txtSaat" value="12">
            </div>
          </div>
          <div class="form-group row mt-2">
            <label for="gun" class="col-sm-2 col-form-label">Dakika</label>
            <div class="col-sm-8 ">
              <input type="text" class="form-control" id="txtDakika" value="30">
            </div>
          </div>
          <div class="form-group row mt-2">
            <label for="gun" class="col-sm-2 col-form-label">Saniye</label>
            <div class="col-sm-8 ">
              <input type="text" class="form-control" id="txtSaniye" value="20">
            </div>
          </div>
          <div class="form-group row mt-2">
            <div class="col-sm-8 offset-2 ">
                <button class="btn btn-primary w-100" id="basla">Başlat</button>
                
            </div>
          </div>
    </div>
    </div>
</div>

<p id="zaman"></p>
</body>
</html>




Mutlu kodlamalar,
Oğuzhan TAŞ
Şubat 2024
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale