A stopwatch tracks elapsed time, typically in hours, minutes, seconds, and fractions of a second. It can be started, stopped, and reset, providing precise timing for various activities, such as sports, experiments, or productivity tracking.
Prerequisites
Approach
- HTML, Bootstrap, and JavaScript were used to create the stopwatch.
- Bootstrap is used for layout, including card structure. JavaScript manages stopwatch functionality.
- Time values are updated every 10 milliseconds.
- Event listeners trigger actions for start, stop, and reset buttons.
- The stopwatch accurately increments seconds, minutes, and hours.
- Single-digit values padded with zeros for consistency. Provides a visually appealing interface.
- Enables tracking of elapsed time in various contexts.
- Combines styling and functionality for effective stopwatch implementation.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >Bootstrap Stopwatch</ title >
< link href =
</ head >
< body >
< div class = "container mt-5" >
< div class = "card" >
< div class = "card-body" >
< div class = "row" >
< div class = "col-12 text-center" >
< h1 >Bootstrap Stopwatch</ h1 >
</ div >
</ div >
< div class = "row mt-5" >
< div class = "col-12" >
< div class = "card" >
< div class = "card-body" >
< div class = "card text-white bg-primary" >
< div class = "card-body text-center" id = "time" >
< span class = "digit" id = "hr" >00</ span >
< span class = "txt" >Hr</ span >
< span class = "digit" id = "min" >00</ span >
< span class = "txt" >Min</ span >
< span class = "digit" id = "sec" >00</ span >
< span class = "txt" >Sec</ span >
< span class = "digit" id = "count" >00</ span >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< div class = "row mt-3 justify-content-center" >
< button class = "btn btn-success mx-2"
id = "start" >Start</ button >
< button class = "btn btn-primary mx-2"
id = "stop" >Stop</ button >
< button class = "btn btn-danger mx-2"
id = "reset" >Reset</ button >
</ div >
</ div >
</ div >
</ div >
< script >
let startBtn = document.getElementById('start');
let stopBtn = document.getElementById('stop');
let resetBtn = document.getElementById('reset');
let hour = 0;
let minute = 0;
let second = 0;
let count = 0;
let timer;
startBtn.addEventListener('click', function () {
// Check if timer is not already running
if (!timer) {
timer = setInterval(stopWatch, 10);
}
});
stopBtn.addEventListener('click', function () {
clearInterval(timer);
timer = null; // Reset timer variable
});
resetBtn.addEventListener('click', function () {
clearInterval(timer);
timer = null; // Reset timer variable
hour = 0;
minute = 0;
second = 0;
count = 0;
updateDisplay();
});
function stopWatch() {
count++;
if (count == 100) {
second++;
count = 0;
}
if (second == 60) {
minute++;
second = 0;
}
if (minute == 60) {
hour++;
minute = 0;
second = 0;
}
updateDisplay();
}
function updateDisplay() {
document.getElementById('hr').textContent =
hour.toString().padStart(2, '0');
document.getElementById('min').textContent =
minute.toString().padStart(2, '0');
document.getElementById('sec').textContent =
second.toString().padStart(2, '0');
document.getElementById('count').textContent =
count.toString().padStart(2, '0');
}
</ script >
</ body >
</ html >
|
Output:
Recommended Articles