Web sitenize dinamik bir şekilde tarih ve saat eklemek, kullanıcı deneyimini geliştirmenin güzel bir yoludur. Bu işlem için JavaScript’in tarih ve saat fonksiyonlarını kullanarak, ziyaretçilerinize sürekli güncellenen bir zaman gösterebilir ve sitenize modern bir görünüm kazandırabilirsiniz. Bu makalede, JavaScript ile tarih ve saati nasıl gösterebileceğinizi, farklı formatlarla nasıl kişiselleştirebileceğinizi öğreneceksiniz. Ayrıca, örnek bir koyu tema tasarımı ile tarih ve saat göstergesi yapacağız.

JavaScript ile Tarih ve Saat Yazdırmanın Avantajları

1. Güncel Bilgi Gösterimi: JavaScript ile tarih ve saat, sayfa yenilenmeden güncellenebilir. Kullanıcılarınız için sürekli güncel bir bilgi sunabilirsiniz.
2. Etkileyici Kullanıcı Deneyimi: Web sitenizin canlı ve etkileşimli bir his vermesini sağlar.
3. Kolay Özelleştirme: JavaScript ile tarih ve saat bilgilerini farklı formatlarda gösterebilir, tasarımınıza uygun hale getirebilirsiniz.
4. Minimal Kaynak Kullanımı: Sunucuya ihtiyaç duymadan, istemci tarafında çalıştığı için performans üzerinde minimum etki yaratır.

Tarih ve Saat Fonksiyonlarına Giriş

JavaScript’te tarih ve saat bilgisi almak için Date nesnesi kullanılır. Bu nesne, tarih ve saat bilgilerini içeren birçok metot sunar. Örneğin:

• new Date(): Mevcut tarih ve saati alır.
• getFullYear(): Yılı döndürür.
• getMonth(): Ayı 0’dan başlayarak (0 Ocak, 11 Aralık) döndürür.
• getDate(): Gün bilgisini verir.
• getHours() ve getMinutes(): Saat ve dakika bilgilerini sağlar.

Dinamik Tarih ve Saat Göstergesi İçin HTML ve JavaScript Örneği

Aşağıdaki örnek, tarih ve saat bilgilerini otomatik olarak güncelleyerek her saniye kullanıcıya gösteren bir JavaScript fonksiyonu içerir. Koyu temalı ve modern bir tasarımla bu gösterimi yapacağız.

HTML

<div id="clock">
	<h1 id="time"></h1>
	<p id="date"></p>
</div>

CSS

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #121212;
	color: #ffffff;
	font-family: Arial, sans-serif;
}
#clock {
	text-align: center;
	padding: 20px;
	border-radius: 8px;
	background-color: #1e1e1e;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
#clock h1 {
	font-size: 2rem;
	margin: 0;
}
#clock p {
	font-size: 1.2rem;
	margin-top: 5px;
}

Javascript

function updateClock() {
	const now = new Date();
	const hours = String(now.getHours()).padStart(2, '0');
	const minutes = String(now.getMinutes()).padStart(2, '0');
	const seconds = String(now.getSeconds()).padStart(2, '0');
	const timeString = `${hours}:${minutes}:${seconds}`;

	const day = String(now.getDate()).padStart(2, '0');
	const month = String(now.getMonth() + 1).padStart(2, '0');
	const year = now.getFullYear();
	const dateString = `${day}/${month}/${year}`;

	document.getElementById('time').textContent = timeString;
	document.getElementById('date').textContent = dateString;
}

setInterval(updateClock, 1000);
updateClock();

Kod Açıklaması

Bu örnekte:

• HTML: #clock isimli bir div ile modern bir tasarım oluşturduk. Bu div içinde bir h1 etiketiyle saat, bir p etiketiyle tarih bilgisi gösteriliyor.
• CSS: Sayfaya koyu bir tema kazandırmak için arka plan ve yazı renklerini belirledik. Ayrıca, box-shadow ile hafif bir gölge efekti ekleyerek modern bir görünüm sağladık.
• JavaScript: updateClock fonksiyonu, Date nesnesini kullanarak her saniye güncellenen bir saat ve tarih bilgisi oluşturuyor. Saat ve dakika bilgileri, çift haneli olarak gösteriliyor.

JavaScript Tarih ve Saat Göstergesi ile İlgili İpuçları

• Farklı Zaman Formatları: Saat ve tarih gösterimini kullanıcı tercihlerine göre AM-PM veya 24 saat formatında ayarlayabilirsiniz.
• Özelleştirilebilir Güncellemeler: Tarih ve saatin her saniye güncellenmesi yerine, yalnızca dakika bazında güncellenmesini sağlayabilirsiniz.
• Ekstra Fonksiyonellik: Farklı zaman dilimlerini göstermek, geri sayım veya belirli bir tarihe kalan süre gibi ekstra özellikler ekleyerek kullanıcı deneyimini artırabilirsiniz.

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.

Javascript konusuyla ilgili yazdığım tüm yazıları bu bağlantıdan veya github hesabımdan inceyebilirsiniz.