JavaScript, dijital saat uygulamaları geliştirmek için popüler bir seçenektir ve zaman bilgisinin dinamik olarak gösterilmesine olanak tanır. Günümüzde dijital saatler, web sitelerinde bilgi sunumunu zenginleştiren önemli bir detaydır. JavaScript ile oluşturulmuş bir dijital saat, sayfa yenilenmesine gerek kalmadan gerçek zamanlı olarak güncellenir, böylece kullanıcıların sürekli olarak güncel zamanı görmeleri sağlanır. Dijital saatler ayrıca estetik olarak da dikkat çekici hale getirilebilir; CSS ile modern ve şık bir görünüm elde edilebilir. Özellikle kullanıcı dostu arayüzlerde, sade ve minimalist saat tasarımları tercih edilmektedir.

JavaScript ile bir dijital saat yaparken Date nesnesi kullanılarak saat, dakika ve saniye bilgileri kolayca elde edilir. Bu bilgiler, belirli bir zaman diliminde otomatik olarak yenilenir ve kullanıcıya sunulur. Saatin düzenli aralıklarla güncellenmesi için ise setInterval fonksiyonu kullanılır. Bu sayede her saniye yeni zaman bilgisi ekrana yansıtılır.

HTML

<div class="clock" id="clock">00:00:00</div>

CSS

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #282c34;
      font-family: Arial, sans-serif;
      color: #61dafb;
    }
    .clock {
      font-size: 5rem;
      letter-spacing: 0.1em;
      background-color: #20232a;
      padding: 20px 40px;
      border-radius: 15px;
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
      text-align: center;
    }

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');
      document.getElementById('clock').textContent = '${hours}:${minutes}:${seconds}';
    }
    setInterval(updateClock, 1000);
    updateClock();

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