Stopwatch

Create a stopwatch

JavaScriptIntermediate
JavaScript
// Method 1: Simple stopwatch
class Stopwatch {
    constructor() {
        this.startTime = null;
        this.elapsedTime = 0;
        this.isRunning = false;
        this.interval = null;
    }
    
    start() {
        if (!this.isRunning) {
            this.startTime = Date.now() - this.elapsedTime;
            this.isRunning = true;
            this.interval = setInterval(() => {
                this.elapsedTime = Date.now() - this.startTime;
                this.onUpdate();
            }, 10); // Update every 10ms
        }
    }
    
    stop() {
        if (this.isRunning) {
            clearInterval(this.interval);
            this.isRunning = false;
        }
    }
    
    reset() {
        this.stop();
        this.elapsedTime = 0;
        this.onUpdate();
    }
    
    onUpdate() {
        const time = this.formatTime(this.elapsedTime);
        console.log(time);
    }
    
    formatTime(milliseconds) {
        const totalSeconds = Math.floor(milliseconds / 1000);
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        const ms = Math.floor((milliseconds % 1000) / 10);
        
        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(ms).padStart(2, '0')}`;
    }
    
    getTime() {
        return this.elapsedTime;
    }
}

const stopwatch = new Stopwatch();
stopwatch.start();

// Method 2: Stopwatch with laps
class StopwatchWithLaps extends Stopwatch {
    constructor() {
        super();
        this.laps = [];
    }
    
    lap() {
        if (this.isRunning) {
            const lapTime = this.elapsedTime - (this.laps.length > 0 ? 
                this.laps.reduce((sum, lap) => sum + lap, 0) : 0);
            this.laps.push(lapTime);
            console.log(`Lap ${this.laps.length}: ${this.formatTime(lapTime)}`);
            return lapTime;
        }
    }
    
    getLaps() {
        return this.laps;
    }
    
    reset() {
        super.reset();
        this.laps = [];
    }
}

const lapStopwatch = new StopwatchWithLaps();
lapStopwatch.start();
// lapStopwatch.lap(); // Record lap

// Method 3: Multiple stopwatches
class MultiStopwatch {
    constructor() {
        this.stopwatches = new Map();
    }
    
    create(id) {
        const sw = new Stopwatch();
        this.stopwatches.set(id, sw);
        return sw;
    }
    
    get(id) {
        return this.stopwatches.get(id);
    }
    
    remove(id) {
        const sw = this.stopwatches.get(id);
        if (sw) sw.stop();
        this.stopwatches.delete(id);
    }
}

const multi = new MultiStopwatch();
const sw1 = multi.create('timer1');
sw1.start();

Output

00:00:00
00:00:01
00:00:02

Stopwatch measures elapsed time.

Basic Stopwatch

  • Start/stop/reset
  • Track elapsed time
  • Format display
  • Update regularly

Lap Functionality

  • Record lap times
  • Calculate lap duration
  • Store lap history
  • Display laps

Features

  • Pause/resume
  • Reset
  • Format time
  • Multiple timers

Time Format

  • MM:SS.ms
  • Minutes:Seconds:Milliseconds
  • Pad with zeros

Use Cases

  • Sports timing
  • Performance measurement
  • Game timers
  • Productivity tracking

Best Practices

  • Use requestAnimationFrame for smooth updates
  • Clear intervals properly
  • Format time nicely
  • Handle edge cases