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.

JavaScript timing methods:
  • setTimeout() - Executes code once after a delay
  • setInterval() - Executes code repeatedly at specified intervals
  • clearTimeout() - Cancels a timeout
  • clearInterval() - 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

10

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

00:00.00

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

00:00

More Timer Examples

Explore more JavaScript timing examples to enhance your learning experience:

Pomodoro Timer

A productivity timer with work/break intervals

Coming Soon

Reaction Timer

Test your reaction time with this interactive timer

Coming Soon

Progress Timer

Timer with visual progress indicator

Coming Soon

Event Countdown

Countdown to a specific date and time

Coming Soon