JS Geri Sayım

Geri Sayım

by Murat Kezli

HTML

<h1>
2024'ün bitmesine
</h1>
 
<div class="container">


    <p id="timer">
        <span id="timer-gunler"></span>
        <span id="timer-saatler"></span>
        <span id="timer-dakikalar"></span>
        <span id="timer-saniyeler"></span>
    </p>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    background-color:#222;
}
h1{margin:0px auto; width:100%; text-align:center; background-color:#222; color:white; padding-top:30px;}
.container {
    background: #222;
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#timer {
    color: #fff;
    font-size: 4rem;
}
.label {
    font-size: 2.5rem;
    padding-left: 0.25rem;
}

JavaScript

var endDate = new Date("Dec 31, 2024 23:59:59").getTime();
    var timer = setInterval(function() {
 
        let now = new Date().getTime(); 
        let t = endDate - now;
        
        if (t >= 0) {
 
            let gunler = Math.floor(t / (1000 * 60 * 60 * 24));
            let saatler = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let dakikalar = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
            let saniyeler = Math.floor((t % (1000 * 60)) / 1000);
 
            document.getElementById("timer-gunler").innerHTML = gunler + 
            "<span class='label'> gün</span>";
 
            document.getElementById("timer-saatler").innerHTML= ("0" + saatler).slice(-2) +
            "<span class='label'> sa</span>";
 
            document.getElementById("timer-dakikalar").innerHTML= ("0" + dakikalar).slice(-2) +
            "<span class='label'> dk</span>";
 
            document.getElementById("timer-saniyeler").innerHTML= ("0" + saniyeler).slice(-2) +
            "<span class='label'> sn</span>";
        }
        else { 
            document.getElementById("timer").innerHTML = "Zaman bitti!"; 
        }
        
        
    }, 1000);