A configurable countdown timer that shows days, hours, minutes, and seconds — with an alert when it hits zero.
Four display boxes for days/hours/minutes/seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<style>
body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: #0f172a; color: #fff; font-family: 'Segoe UI', sans-serif; }
h1 { font-size: 1.4rem; margin-bottom: 32px; color: #94a3b8; letter-spacing: .1em; text-transform: uppercase; }
.timer { display: flex; gap: 24px; }
.box { text-align: center; background: #1e293b; border-radius: 12px; padding: 28px 32px; min-width: 90px; }
.box span { display: block; font-size: 3rem; font-weight: 700; color: #6366f1; line-height: 1; }
.box p { font-size: 0.75rem; color: #64748b; margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; }
#message { margin-top: 32px; font-size: 1.4rem; color: #f43f5e; display: none; }
</style>
</head>
<body>
<?php require_once __DIR__ . '/../promo_banner.php'; ?>
<h1>🚀 Launch in</h1>
<div class="timer">
<div class="box"><span id="days">00</span><p>Days</p></div>
<div class="box"><span id="hours">00</span><p>Hours</p></div>
<div class="box"><span id="mins">00</span><p>Minutes</p></div>
<div class="box"><span id="secs">00</span><p>Seconds</p></div>
</div>
<p id="message">🎉 We're live!</p>
<script src="timer.js"></script>
</body>
</html>Calculate the gap between now and the target date every second.
// Set your target date here
const TARGET = new Date('2025-12-31T00:00:00');
const pad = n => String(n).padStart(2, '0');
function tick() {
const diff = TARGET - new Date();
if (diff <= 0) {
['days','hours','mins','secs'].forEach(id => document.getElementById(id).textContent = '00');
document.getElementById('message').style.display = 'block';
clearInterval(timer);
return;
}
const days = Math.floor(diff / 86400000);
const hours = Math.floor((diff % 86400000) / 3600000);
const mins = Math.floor((diff % 3600000) / 60000);
const secs = Math.floor((diff % 60000) / 1000);
document.getElementById('days').textContent = pad(days);
document.getElementById('hours').textContent = pad(hours);
document.getElementById('mins').textContent = pad(mins);
document.getElementById('secs').textContent = pad(secs);
}
const timer = setInterval(tick, 1000);
tick();Your countdown timer is live and ticking. Embed it in a landing page to build excitement before a product launch.
Spotted a bug, broken code, or something that doesn't look right? Tell us what's off and we'll fix it.