JavaScript Countdown Timers
Explore interactive JavaScript timer examples - create countdowns, stopwatches, and custom timers with practical implementations.
Introduction to JavaScript Timers
JavaScript provides powerful timing functions that allow you to execute code at specified time intervals. These functions are essential for creating countdowns, animations, and other time-based interactions.
setTimeout()- Executes code once after a delaysetInterval()- Executes code repeatedly at specified intervalsclearTimeout()- Cancels a timeoutclearInterval()- Cancels an interval
These timing functions are fundamental for creating interactive experiences where time is a critical element. From simple countdowns to complex animations, JavaScript timers enable dynamic web experiences.
Example 1: New Year Countdown
A classic countdown timer that counts down from 10 seconds to zero and displays a "Happy New Year" message. This example demonstrates the use of setInterval() and clearInterval().
// New Year Countdown Implementation
function countdown() {
let counter = 10;
const timerDisplay = document.getElementById('demo');
const countdownInterval = setInterval(() => {
timerDisplay.textContent = counter;
counter--;
if (counter < 0) {
timerDisplay.textContent = "HAPPY NEW YEAR!!";
timerDisplay.style.fontSize = "3rem";
clearInterval(countdownInterval);
}
}, 1000);
}
New Year Countdown Demo
Example 2: Stopwatch
A functional stopwatch that counts up from zero. This example demonstrates how to create a timer that tracks elapsed time with start, stop, and reset functionality.
// Stopwatch Implementation
let stopwatchInterval;
let elapsedTime = 0;
function startStopwatch() {
if (stopwatchInterval) return;
stopwatchInterval = setInterval(() => {
elapsedTime++;
updateStopwatchDisplay();
}, 10);
}
function stopStopwatch() {
clearInterval(stopwatchInterval);
stopwatchInterval = null;
}
function resetStopwatch() {
clearInterval(stopwatchInterval);
stopwatchInterval = null;
elapsedTime = 0;
updateStopwatchDisplay();
}
function updateStopwatchDisplay() {
const minutes = Math.floor(elapsedTime / 6000);
const seconds = Math.floor((elapsedTime % 6000) / 100);
const milliseconds = elapsedTime % 100;
const display = document.getElementById('stopwatch');
display.textContent =
`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
}
Stopwatch Demo
Example 3: Custom Countdown
A flexible countdown timer that allows users to set custom time values. This example demonstrates how to create a timer that counts down from a user-specified duration.
// Custom Countdown Implementation
let customTimer;
let remainingTime = 0;
function startCustomTimer() {
const minutes = parseInt(document.getElementById('minutes').value) || 0;
const seconds = parseInt(document.getElementById('seconds').value) || 0;
remainingTime = minutes * 60 + seconds;
const totalTime = remainingTime;
if (remainingTime <= 0) return;
if (customTimer) clearInterval(customTimer);
customTimer = setInterval(() => {
remainingTime--;
if (remainingTime < 0) {
clearInterval(customTimer);
document.getElementById('customTimer').textContent = "TIME'S UP!";
return;
}
const mins = Math.floor(remainingTime / 60);
const secs = remainingTime % 60;
document.getElementById('customTimer').textContent =
`${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
// Update progress bar
const progress = (remainingTime / totalTime) * 100;
document.getElementById('progressBar').style.width = `${progress}%`;
}, 1000);
}
Custom Countdown Demo
More Timer Examples
Explore more JavaScript timing examples to enhance your learning experience: