Colorful Stopwatch
00:00:00
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.stopwatch-container {
text-align: center;
}
.stopwatch {
background-color: #3498db;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#display {
font-size: 2em;
color: #fff;
margin-bottom: 10px;
}
button {
background-color: #2ecc71;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
font-size: 1em;
cursor: pointer;
border-radius: 5px;
outline: none;
}
button:hover {
background-color: #27ae60;
}
let timer;
let hours = 0;
let minutes = 0;
let seconds = 0;
function startStopwatch() {
if (!timer) {
timer = setInterval(updateStopwatch, 1000);
}
}
function stopStopwatch() {
clearInterval(timer);
timer = null;
}
function resetStopwatch() {
clearInterval(timer);
timer = null;
hours = 0;
minutes = 0;
seconds = 0;
updateDisplay();
}
function updateStopwatch() {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
}
}
updateDisplay();
}
function updateDisplay() {
const display = document.getElementById('display');
display.textContent = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`;
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}let timer;
let hours = 0;
let minutes = 0;
let seconds = 0;
function startStopwatch() {
if (!timer) {
timer = setInterval(updateStopwatch, 1000);
}
}
function stopStopwatch() {
clearInterval(timer);
timer = null;
}
function resetStopwatch() {
clearInterval(timer);
timer = null;
hours = 0;
minutes = 0;
seconds = 0;
updateDisplay();
}
function updateStopwatch() {
seconds++;
if (seconds === 60) {
seconds = 0;
minutes++;
if (minutes === 60) {
minutes = 0;
hours++;
}
}
updateDisplay();
}
function updateDisplay() {
const display = document.getElementById('display');
display.textContent = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`;
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}