Html Dijital Saat Ekleme

HTML Dijital Saat Ekleme: Kapsamlı Bir Kılavuz

Dijital saatler, web sitelerine dinamik ve kullanışlı bir özellik eklemek için mükemmel bir yoldur. Kullanıcıların gerçek zamanı takip etmelerine, randevuları planlamalarına ve hatta geri sayım sayacı olarak kullanmalarına olanak tanırlar. Bu kılavuzda, HTML kullanarak web sitenize dijital bir saat ekleme adımlarını ayrıntılı olarak inceleyeceğiz.

Adım 1: HTML Belgenizi Oluşturun

Yeni bir HTML belgesi oluşturarak başlayın. Dosyanızı “index.html” olarak adlandırın ve aşağıdaki kodu ekleyin:

“`html

Dijital Saat

“`

Adım 2: JavaScript Dosyası Oluşturun

“saat.js” adlı yeni bir JavaScript dosyası oluşturun ve aşağıdaki kodu ekleyin:

“`javascript
function saatGoster() {
var tarih = new Date();
var saat = tarih.getHours();
var dakika = tarih.getMinutes();
var saniye = tarih.getSeconds();

if (saat < 10) {
saat = “0” + saat;
}
if (dakika < 10) {
dakika = “0” + dakika;
}
if (saniye < 10) {
saniye = “0” + saniye;
}

var saatStr = saat + “:” + dakika + “:” + saniye;
document.getElementById(“saat”).innerHTML = saatStr;
}

setInterval(saatGoster, 1000);
“`

Adım 3: JavaScript Dosyasını HTML Belgenize Bağlayın

HTML belgenizdeki <head> bölümüne aşağıdaki satırı ekleyerek JavaScript dosyanızı bağlayın:

“`html

“`

Adım 4: Saati Gösterin

HTML belgenizdeki <body> bölümüne, saatin gösterileceği bir <div> öğesi ekleyin. Bu öğeye “saat” kimliğini verin:

“`html

“`

Adım 5: Saati Güncelleyin

JavaScript dosyanızdaki saatGoster() fonksiyonu, her saniye mevcut saati alır ve “saat” kimlikli <div> öğesinin iç HTML’sini günceller.

İsteğe Bağlı: Saat Formatını Özelleştirin

Varsayılan olarak, saat 24 saatlik formatta gösterilir. 12 saatlik formatı kullanmak için saatGoster() fonksiyonundaki aşağıdaki satırı değiştirin:

javascript var saat = tarih.getHours();

javascript var saat = tarih.getHours() % 12;

İsteğe Bağlı: AM/PM Göstergesini Ekleyin

12 saatlik formatı kullanıyorsanız, AM/PM göstergesini eklemek için saatGoster() fonksiyonuna aşağıdaki satırı ekleyin:

javascript var saatStr = saat + ":" + dakika + ":" + saniye + " " + (saat < 12 ? "AM" : "PM");

Faydalı Kaynaklar

Sonuç

Bu kılavuzu takip ederek, web sitenize kolayca dijital bir saat ekleyebilirsiniz. Bu özellik, kullanıcı deneyimini geliştirmeye ve web sitenizin işlevselliğini artırmaya yardımcı olacaktır.