Anlık Güncel Tarih ve Saat Gösterimi

Javascript ile sitenize ekleyebileceğiniz anlık, güncel ve her saniye yenilenen tarih ve saat gösteriminden bahsettim. Örnek kullanımı incelemek için yazımın devamını okuyabilirsiniz.

Merhabalar,

Bu yazımda sitenizde anlık, güncel ve her saniye yenilenen tarih ve saat gösteriminden bahsedeceğim. Bu işlemi Javascript ile yaparak örneklendireceğim. Admin, müşteri panellerine veya header bölümüne ekleyebilirsiniz.

Hemen nasıl yapacağımıza bakalım;

<div id="zaman"></div>
<script>
function tarihSaat() {
    var date = new Date().toLocaleString('tr-TR'); // tarih saati al
    document.getElementById("zaman").innerHTML = date; // zaman id'li elemente yazdır
}
</script> 

Yukarıdaki kod parçacığı anlık tarih ve saati zaman id’li Html elementine yazdıracaktır. Tabii sadece yazdırma anlık olarak basıp oraya sabit tarih ve saati gömecektir. Bunu her 1 saniye içinde yenilersek, saniyeler arttıkça saatin ve tarihin gerekli zaman dilimlerinde güncellendiğini görebiliriz. Bu sayede sayfayı yenilememiz gerekmeden, her 1 saniyede tarihSaat fonksiyonunu yeniden çalıştırabiliriz.

Bu işlem için setInterval kullanacağım;

<div id="zaman"></div>
<script>
function tarihSaat() {
    var date = new Date().toLocaleString('tr-TR');
    document.getElementById("zaman").innerHTML = date;
}
// her 1 saniyede tarihSaat fonksiyonunu yeniden çalıştır
setInterval(tarihSaat, 1000); 
</script> 

İşlemimiz bu kadar. Her 1 saniyede güncellendiği için anlık saati ve tarihi otomatik olarak yazdıracaktır.

Kullanışlı bir özellik olduğunu düşünüyorum. İşinize yarayacak kısa bir işlemdir.

Mutlu Kodlamalar 🙂

0 Shares:
2 comments

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Butona Dalga Efekti Verme
Devamını Oku

Butona Dalga Efekti Verme

Çoğunlukla android cihazlarda veya materializecss.com üzerinde görebileceğiniz butona tıklandığında oluşan dalga efektinden bahsettim. Merak edenler için yazının devamını okuyabilirsiniz.

Devamını Oku