Fixed JavaScript Countdown That Survives Page Refresh

A fixed countdown should count toward an absolute target date/time instead of starting again from the same number of seconds after every refresh. The server can provide the target timestamp, while JavaScript continuously calculates the remaining time in the browser.

const targetTime = new Date("2027-01-01T00:00:00+05:30").getTime();
const remaining = targetTime - Date.now();

Why a relative countdown resets
Use an absolute target
Generate target data with PHP
Update with JavaScript
Server time vs client time
Expired targets
Common mistakes

Why a Relative Countdown Resets on Refresh Top ↑

If every page load starts with a hard-coded value such as 3600 seconds, refreshing gives the user another hour. An absolute event timestamp solves this because the remaining duration is recalculated from the same deadline.

Use an Absolute Countdown Target Top ↑

const target = new Date("2027-01-01T00:00:00Z").getTime();
const remaining = Math.max(0, target - Date.now());

Provide the Target Timestamp from PHP When Needed Top ↑

If the deadline comes from your server/database, encode it as data rather than building JavaScript source by string concatenation.

<?php
$targetIso = '2027-01-01T00:00:00+05:30';
?>
<script>
const targetIso = <?= json_encode($targetIso) ?>;
const targetTime = new Date(targetIso).getTime();
</script>

Update the Remaining Time in JavaScript Top ↑

function update() {
  const left = Math.max(0, targetTime - Date.now());
  output.textContent = formatRemaining(left);
}
update();
const id = setInterval(update, 1000);

Server Time vs Client Time Top ↑

The deadline may come from the server, but Date.now() uses the client clock. For ordinary informational countdowns that is often acceptable. For auctions, authentication, payments, exams, or other authoritative deadlines, enforce the deadline on the server and treat the browser countdown as display only.

Handle an Expired Target Top ↑

if (Date.now() >= targetTime) {
  output.textContent = "Event has started";
  clearInterval(id);
}

Common Fixed-Countdown Mistakes Top ↑

Resetting a relative duration on every reload.
Trusting the browser clock for security-sensitive deadlines.
Sending a date string without an explicit timezone rule.
Keeping a completed interval running forever.

Also see the real-time clock.

Countdown Timer 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: