<div class="clock-container">
  <div id="clock" class="time-display">00:00:00</div>
  <div id="date" class="date-display">Mon, Jan 1</div>
</div>

.clock-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #111827;
  color: #fff;
  display: inline-block;
  padding: 20px 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.time-display {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.date-display {
  font-size: 1rem;
  color: #9ca3af;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

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").innerText = `${hours}:${minutes}:${seconds}`;
  
  const options = { weekday: "short", month: "short", day: "numeric" };
  document.getElementById("dateinnerText").innerText = now.toLocaleDateString("en-US", options);
}

setInterval(updateClock, 1000);
updateClock();

Back to Snippets

Digital Clock Display JS

Add a functional clock to your dashboard or header. This lightweight script updates the time every second and ensures single-digit minutes and seconds are properly formatted with leading zeros.

378

#javascript

#css

#clock

#time

#date

#digital

#widget

#ui

/HTML *CSS ()JS Output Live Updates

Digital Clock Display JS

Share Code Snippet