Sitene Kod Ekle | Blogger Eklentileri

HTML ile Anlık Güncel Tarih ve Saat Gösterimi: JavaScript'in Gücü

Written By Yazarlife on 7 Eylül 2024 Cumartesi | Eylül 07, 2024

Sponsor Siteler* Güncel Blog Yazıları ( Blog Radikal )
* Geniş Kod Arşivi ( Sitene Kod Ekle )
* Şarkı Sözleri ( Sitene Yazılar )
* Deneme Yazıları ( Yazar Edebiyat )
* Sağlık, Moda, Kadın Yazıları ( Yazar Haberi )

HTML ile Anlık Güncel Tarih ve Saat Gösterimi: JavaScript'in Gücü

HTML kendi başına dinamik içerik güncelleme özelliğine sahip değildir. Ancak JavaScript ile birleştirildiğinde, web sayfalarına gerçek zamanlı güncellemeler ekleyebiliriz. Bu sayede web sayfanızda sürekli güncellenen bir saat veya tarih gösterebilirsiniz.

Temel İşlem:

HTML: Sayfada saatin veya tarihin görüntüleneceği bir element (genellikle bir <div> veya <span>) oluşturun.

JavaScript:

Bir fonksiyon tanımlayın.

Bu fonksiyon içinde yeni bir Date nesnesi oluşturarak sistemin saat ve tarih bilgilerini alın.

Alınan bilgileri istediğiniz formatta düzenleyin.

HTML elementinin içerik kısmını bu düzenlenmiş bilgilere eşitleyin.

Bu fonksiyonu belirli aralıklarla (örneğin her saniye) çalışacak şekilde ayarlayın.

Örnek Kod: 1

Saat önde., Tarih arkada. Diğer kod da tam tersidir...

<!DOCTYPE html>
<html>
<head>
    <title>Anlık Saat</title>
</head>
<body>
    <div id="saat"></div>

    <script>
        function guncelleSaat() {
            const zaman = new Date();
            const saatDakikaSaniye = zaman.toLocaleTimeString();
            const tarih = zaman.toLocaleDateString();
            document.getElementById("saat").textContent = saatDakikaSaniye + " - " + tarih;
        }

        // Her saniye bir kez güncelle
        setInterval(guncelleSaat, 1000);
    </script>
</body>
</html>

Örnek Kod: 2 Tarih önde. Saat sonra çıkar...

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

Kod: 3

<div id="clock"></div>
<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var day=d.getDay();
var date=d.getDate();
var month=d.getMonth();
var year=d.getFullYear();
var days=new Array("Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi");
var months=new Array("Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık");
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
document.getElementById("clock").innerHTML= "<b>Tarih:</b> " + date + " " + months[month] + " " + year + " | <b>Günlerden:</b> " + days[day] + " | <b>Saat:</b> " + h + ":" + m + ":" + s + " "
setTimeout("refrClock()",1000);
}
refrClock();
</script>

* Sayfa Yazarı: Murat Marti 
* Diğer Kaynaklar: GEMİNİ - Google Yapay Zeka. CHATGPT - Copilot
* Fotoğraflar: Pixabay ve Pexels Ücretsiz Fotoraflardan Alınmıştır...

NOT: Sitede çalışmayan kodları, o yazının altında ki yorum kutusundan bize yazınız.