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...
Örnek Kod: 2 Tarih önde. Saat sonra çıkar...<!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>
Kod: 3<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>
<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>
0 Comments:
Yorum Gönder