Stopwatch tool

 

Stopwatch

00:00:00

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .stopwatch-container { max-width: 400px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; } h1 { color: #333; } #display { font-size: 48px; font-weight: bold; margin-bottom: 20px; } .controls button { padding: 10px 20px; margin: 0 5px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; } .controls button:hover { background-color: #0056b3; } let timerInterval; let startTime; let elapsedTime = 0; let isRunning = false; function startStopwatch() { if (!isRunning) { isRunning = true; startTime = Date.now() - elapsedTime; timerInterval = setInterval(updateTime, 10); } } function stopStopwatch() { if (isRunning) { isRunning = false; clearInterval(timerInterval); } } function resetStopwatch() { stopStopwatch(); elapsedTime = 0; updateDisplay(); } function updateTime() { const now = Date.now(); elapsedTime = now - startTime; updateDisplay(); } function updateDisplay() { const ms = elapsedTime % 1000; const seconds = Math.floor(elapsedTime / 1000) % 60; const minutes = Math.floor(elapsedTime / (1000 * 60)) % 60; const hours = Math.floor(elapsedTime / (1000 * 60 * 60)); const display = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}.${pad(ms, 3)}`; document.getElementById('display').innerText = display; } function pad(value, length = 2) { return value.toString().padStart(length, '0'); }