JavaScript ile Tarih ve Saat Geri Sayımı Yapma

Sitenize bir geri sayım sayacı eklemek için jQuery’e ihtiyacınız yoktur. Önceden tanımlanmış bir tarih ve saate kadar geri sayılabilir özelleştirilebilir bir zamanlayıcı oluşturmak için sadece birkaç satır JavaScript yeterlidir. Zamanlayıcıyı Yakında ve Bakım sayfaları, e-Ticaret mağazaları, günlük fırsatlar web siteleri ve etkinlik kaydı sayfaları gibi çeşitli sayfalara gömebilirsiniz.

Bu derste, her şeyi anlayabilmeniz için adım adım geri sayım sayacı oluşturacağız. JavaScript kodunun tamamını makalenin sonunda bulabilirsiniz.

Örnek uygulama için tıklayın

İçindekiler

1. HTML OLUŞTURMA

HTML ile başlayalım. Geri sayım sayacı dört rakam gösterecektir: gün, saat, dakika ve saniye. Her biri için bir  öğesi oluşturun, böylece daha sonra bunları JavaScript ile hedefleyebilirsiniz.

Ayrıca, kapanış <body> etiketinden hemen önce JavaScript dosyasına giden bir <script> etiketi ekleyin.


<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>
<script src="uygulama.js"></script>

</div>

2. SON TARİHİ AYARLAYIN

Geri sayımın sona ereceği tarih ve saat için yeni bir global değişken oluşturun (örnekte endDate). değerini, yeni bir Date nesnesi oluşturarak ve getTime() yöntemini çağırarak tanımlayabilirsiniz.

EndDate değişkeni, son kullanma tarihini 1 Ocak 1970, 00: 00: 00.000 GMT’den bu yana geçen milisaniyeyi gösteren UTC biçiminde tutar. Örneğin, 15 Mart 2020, 12:00:00 UTC değeri, 1584262800000’dir.


var endDate = new Date("Mar 15, 2020 12:00:00").getTime();

var endDate = new Date("Mar 15, 2020 12:00:00").getTime();

3.ZAMANLAYICIYI TANIM

Zamanlayıcı için başka bir global değişken oluşturun. Aşağıdaki örnekte bir işlev ifadesi kullanılmıştır, bu nedenle işlevi ayrı ayrı çağırmanız gerekmez. Ancak, isterseniz bunu bir işlev ifadesi olarak da ilan edebilirsiniz.

SetInterval() global JavaScript yöntemi arka arkaya bir işlevi yürütür. İlk argüman çalıştırılacak işlev ve ikinci argüman yürütmeler arasındaki gecikmedir. Gecikmeyi milisaniye cinsinden bildirmeniz gerekir. Zamanlayıcıyı her saniye güncellemek istediğinizde, burada 1000 olacaktır (1 saniye = 1000 milisaniye).


var timer = setInterval(function() {

    /* geri kalan js kodları buraya gelecek. */

}, 1000);

var timer = setInterval(function() {

/* geri kalan js kodları buraya gelecek. */

}, 1000);

4. HATIRLAMA SÜRESİNİ HESAPLAYIN

Timer() işlevinin içinde iki yeni yerel değişken tanımlayın. Birincisi (şimdi) şimdiki zamanı döndürür, diğeri (t) kalan zamanı hesaplar.

JavaScript’te, boş bir Date() nesnesi geçerli tarih ve saati döndürür. Şimdi değişken, getTime() yöntemini çağırır ve geçerli saati UTC biçiminde saklar. t değişkeni, kalan zamanı bitiş tarihinden itibaren indirerek kalan zamanı hesaplar.


let now = new Date().getTime(); 
let t = endDate - now;

let now = new Date().getTime();

let t = endDate - now;

5. GÜN, SAAT, DAKİKA VE SANİYELER İÇİN UTC ZAMANINI DÖNÜŞTÜR

Zamanlayıcıya ait talimatları tutacak bir if bloğu oluşturun. Bu kod kalan süre sıfırdan büyük olana kadar her saniye çalıştırılır. Bir if bloğu kullanarak, geri sayım sona erdiğinde zamanlayıcıyı durdurmanız gerekmez.

İlk önce, kalan zamanı kullanılabilir bir formata dönüştürmeniz gerekir. Şu anda UTC biçiminde, gün, saat, dakika ve saniye olarak görüntülemeniz gerekiyor. Bu nedenle, kalan günler, saatler, dakikalar ve saniyeler için dört yeni yerel değişken bildirin.


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);

}

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);

}

6. ZAMANLAYICI ÇIKIŞI

Artık tüm verileriniz doğru biçimde olduğunda, zamanlayıcıyı ekrana aktarabilirsiniz. Belge nesnesinin getElementById () yöntemi, 1. adımda oluşturduğunuz HTML öğelerini sırasıyla
#timer-gunler,
#timer-saatler,
#timer-dakikalar,
#timer-saniyeler.
innerHTML özelliği ile hedeflenen HTML öğelerine içerik yerleştirebilirsiniz.


            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>";

document.getElementById("timer-gunler").innerHTML = gunler +

" gün";

document.getElementById("timer-saatler").innerHTML= ("0" + saatler).slice(-2) +

" sa";

document.getElementById("timer-dakikalar").innerHTML= ("0" + dakikalar).slice(-2) +

" dk";

document.getElementById("timer-saniyeler").innerHTML= ("0" + saniyeler).slice(-2) +

" sn";

Zaman dönüşüm hesaplamalarının altındaki if (t> = 0) bloğuna aşağıdaki kodu ekleyin:

Yukarıdaki kod, değerleri 10’dan küçük olduğunda saat, dakika ve saniyeye “0” karakterini ekler. Bu gerekli olmamakla birlikte, basamak sayısı ekranda her zaman değişmediğinde zamanlayıcı daha iyi görünür.

Bu, bir veri kümesinin bir kısmını döndürmek için kullanılabilen dilim () yöntemini kullanan bir biçimlendirme hilesiyle başarılabilir. Örneğin, dilim (1) bir dizenin ilk karakterini keser ve dizenin geri kalanını döndürür. Benzer şekilde, dilim (2) ilk iki karakteri siler ve gerisini döndürür. Negatif bir değer, dilimleme yerine hedeflenen karakterleri döndürür. Bu nedenle, dilim (-2) bir dizenin son iki karakterini döndürür.

Kodda her basamağı “0” ile hazırlamanız ve son iki karakteri dilim (-2) ile döndürmeniz gerekir. Bu şekilde JavaScript, her bir basamak numarasına baştaki bir sıfır ekler ancak iki basamaklı sayıları değişmeden bırakır.

7. FAZLA AŞAĞIDAKİ OLDUĞUNDA KULLANICILARI BİLDİRMEK

İsterseniz geri sayım bittiğinde kullanıcıları haberdar edebilirsiniz. Başka bir blok oluşturun ve #timer öğesini getElementById () yöntemiyle hedefleyin. Geri sayım süresi dolduğunda kullanıcılara görüntülemek istediğiniz herhangi bir metni innerHTML olarak ekleyebilirsiniz.


else {

    document.getElementById("timer").innerHTML = "Zaman bitti!";

}

else {

document.getElementById("timer").innerHTML = "Zaman bitti!";

}

Alternatif olarak, diğer tüm bloğu atlayabilirsiniz, bu durumda geri sayım sona erdiğinde zamanlayıcı ekrandan kaybolur.

8. HEPSİNİ BİR ARAYA GETİRMEK

Geri sayım sayacını oluşturmak için kullanmanız gereken tam JavaScript kodu:


    var endDate = new Date("Mar 15, 2022 12:00:00").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);

var endDate = new Date("Mar 15, 2022 12:00:00").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 +

" gün";

document.getElementById("timer-saatler").innerHTML= ("0" + saatler).slice(-2) +

" sa";

document.getElementById("timer-dakikalar").innerHTML= ("0" + dakikalar).slice(-2) +

" dk";

document.getElementById("timer-saniyeler").innerHTML= ("0" + saniyeler).slice(-2) +

" sn";

}

else {

document.getElementById("timer").innerHTML = "Zaman bitti!";

}

}, 1000);

9. BAZI CSS EKLEMEK

Geri sayım sayacını istediğiniz şekilde biçimlendirebilirsiniz. Aşağıdaki CSS, ekranın ortasına hem yatay olarak hem de dikey olarak konumlandırmak için flexbox kullanır.


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

body {

margin: 0;

padding: 0;

}

.container {

background: #222;

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

#timer {

color: #fff;

font-size: 4rem;

}

.label {

font-size: 2.5rem;

padding-left: 0.25rem;

}

SONUÇ

Yukarıdaki CSS’yi kullanarak geri sayım sayacı nasıl görünüyor. Zamanlayıcı çalışırken, günleri, saatleri, dakikaları ve saniyeleri gösterir:

5 Yorum

Yorum yapmak için tıklayın

İptal Et

Hasan dedi ki:
Haziran 18, 2020, 2:17 am
Teşekkürler çok faydalı bir makale olmuş..
Cevapla
Pâyidar dedi ki:
Nisan 29, 2021, 4:26 pm
EyvAllah, Güzel Makale….
Cevapla
Ahmed dedi ki:
Mayıs 31, 2021, 4:40 pm
çok güzel ve yararlı fakat sayfayı yenilediğimde en baştan alıyor sayacı kaldığı yerden devam etmesini nasıl sağlayabilirim? Bu konuda yardımcı olabilirseniz çok sevinirim teşekkürler 🙂
NOT: sizin yaptığınız demoya da baktım fakat o da aynı şekilde sayfa yenilendiğinde en baştan alıyor sayacı
Cevapla
- admin dedi ki:
  Haziran 1, 2021, 2:31 am
  var endDate = new Date(“Mar 15, 2020 12:00:00”).getTime();
  Biteceği tarihi ifade ediyor. Buradaki tarih değerini değiştirdiğinde o tarihe kadar olan zamanı yapacaktır.
  Not: yaptığım demoda görsel olarak geriye saydığını göstermek için yaptım. Kodları kaynakdan aldıysan 43. satırdaki yeri açıp 44. satırı kaldırabilirsin.
  var endDate = new Date(“Mar 15, 2022 12:00:00”).getTime(); gibi yaparsan mart 2022 de sonlanacaktır.
  Cevapla
anonim dedi ki:
Mayıs 31, 2023, 5:25 pm
hocam çalıştırıyorum hemen zaman bitti diyor sebebi nedir
Cevapla