Real-Time Clock in JavaScript

A real-time JavaScript clock reads the current time from the user's device and updates the display periodically. The important accuracy rule is to create a fresh Date on each update instead of adding one second to a counter.

const formatter = new Intl.DateTimeFormat(undefined, {
  dateStyle: "medium",
  timeStyle: "medium"
});

setInterval(() => {
  output.textContent = formatter.format(new Date());
}, 1000);

Client Time vs Server Time Top ↑

new Date() uses the browser environment's current clock. If the user's system time is wrong, the displayed clock will also be wrong. If your application needs authoritative server time, fetch it from the server and account for network delay.

Basic Real-Time Clock Top ↑

const output = document.getElementById("clock");
function updateClock() {
  output.textContent = new Date().toLocaleString();
}
updateClock();
const clockId = setInterval(updateClock, 1000);

Format a Clock with Intl.DateTimeFormat Top ↑

const formatter = new Intl.DateTimeFormat("en-IN", {
  year: "numeric", month: "2-digit", day: "2-digit",
  hour: "2-digit", minute: "2-digit", second: "2-digit"
});

See time strings and UTC formatting.

12-Hour and 24-Hour Clock Formats Top ↑

const twelveHour = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium", hour12: true
});
const twentyFourHour = new Intl.DateTimeFormat("en-GB", {
  timeStyle: "medium", hour12: false
});

Manual Zero-Padding When You Need a Custom Format Top ↑

const pad2 = value => String(value).padStart(2, "0");
const now = new Date();
const time = `${pad2(now.getHours())}:${pad2(now.getMinutes())}:${pad2(now.getSeconds())}`;

Display the Same Instant in UTC Top ↑

For a quick UTC representation, toUTCString() converts the same Date instant into a readable UTC string.

const now = new Date();
console.log(now.toUTCString());

For structured data exchange, toISOString() is usually a better machine-readable UTC format. See UTC date and time strings.

Build a Custom MM/DD/YYYY HH:MM:SS Format Top ↑

If a product requires an exact custom layout instead of locale-sensitive output, build the components deliberately and pad single digits.

const now = new Date();
const pad2 = value => String(value).padStart(2, "0");
const formatted = `${pad2(now.getMonth() + 1)}/${pad2(now.getDate())}/${now.getFullYear()} ${pad2(now.getHours())}:${pad2(now.getMinutes())}:${pad2(now.getSeconds())}`;

Build a Custom 12-Hour Clock with AM/PM Top ↑

Intl.DateTimeFormat is normally simpler, but understanding the conversion helps when you must produce a custom 12-hour format.

const now = new Date();
const hour24 = now.getHours();
const period = hour24 >= 12 ? "PM" : "AM";
const hour12 = hour24 % 12 || 12;
console.log(`${hour12}:${String(now.getMinutes()).padStart(2, "0")} ${period}`);

Display the Current Time in a Textbox Top ↑

const field = document.getElementById("timeField");
field.value = new Date().toLocaleTimeString();

Use a normal text element instead when the value is display-only; an input can imply that the user is expected to edit it.

Style the Clock with CSS Instead of JavaScript Top ↑

The original page changed font size and color directly from JavaScript. Presentation is easier to maintain in CSS:

/* CSS */
.clock-output {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

Clock Accuracy and Timer Drift Top ↑

Timer callbacks can be delayed. A correct clock re-reads the current time each update, so it naturally catches up after a delayed callback. Avoid adding one second to a stored value on every interval tick.

Displaying Server Time Top ↑

JavaScript alone reads client-side time. For an authoritative server-time clock, request the current server time through HTTP/Ajax and use that value as the reference. See the existing server-side clock with Ajax and PHP.

Related JavaScript Clock Projects Top ↑

Show/hide a clock, clocks in different time zones, alarm clock, and stopwatch.

Also related: countdown timer, setTimeout timer, and the JavaScript tutorial index.

← Date Reference

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: