Creating a simple stopwatch with JavaScript
A stopwatch is a timepiece that allows you to measure the amount of time elapsed between two points in time. In this article, we’ll show you how to create a simple stopwatch using JavaScript that can be used to time events or measure the execution time of a block of code.
Demo Application
HTML and CSS
The first step is to create the HTML and CSS for the stopwatch. We’ll create a simple layout consisting of a display area for the stopwatch, and three buttons for start, stop, and reset.
1 2 3 4 5 6 | <div id="stopwatch"> <div id="display">00:00:00</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> </div> |
The CSS for the stopwatch is also simple, with some basic styling applied to the display area and the buttons.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | #stopwatch { Â Â display: flex; Â Â flex-direction: column; Â Â align-items: center; } #display { Â Â font-size: 48px; Â Â margin: 20px 0; Â Â padding: 10px; Â Â border: 2px solid #333; Â Â border-radius: 10px; Â Â background-color: #f5f5f5; Â Â color: #333; Â Â text-align: center; } button { Â Â font-size: 24px; Â Â padding: 10px 20px; Â Â margin: 10px; Â Â background-color: #333; Â Â color: #fff; Â Â border: none; Â Â border-radius: 5px; Â Â cursor: pointer; Â Â transition: background-color 0.3s ease; } button:hover { Â Â background-color: #555; } button:active { Â Â transform: translateY(1px); } #start { Â Â background-color: #28a745; } #start:hover { Â Â background-color: #218838; } #stop { Â Â background-color: #dc3545; } #stop:hover { Â Â background-color: #c82333; } #reset { Â Â background-color: #6c757d; } #reset:hover { Â Â background-color: #5a6268; } @keyframes blink { Â Â 0% { Â Â Â Â opacity: 0; Â Â } Â Â 50% { Â Â Â Â opacity: 1; Â Â } Â Â 100% { Â Â Â Â opacity: 0; Â Â } } #display.running { Â Â animation: blink 1s linear infinite; } |
JavaScript
Now, we can start with the JavaScript code for the stopwatch. We’ll use the setInterval function to increment the stopwatch display every millisecond. We’ll also use a state object to keep track of the stopwatch state.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | let state = { running: false, elapsed: 0, intervalId: null }; function update() { let display = document.getElementById("display"); let minutes = Math.floor(state.elapsed / 60000); let seconds = Math.floor((state.elapsed % 60000) / 1000); let milliseconds = Math.floor((state.elapsed % 1000) / 10); display.innerText = `${pad(minutes)}:${pad(seconds)}:${pad(milliseconds)}`; } function pad(number) { return number < 10 ? `0${number}` : number; } function start() { if (!state.running) { state.intervalId = setInterval(() => { state.elapsed += 10; update(); }, 10); state.running = true; } } function stop() { if (state.running) { clearInterval(state.intervalId); state.running = false; } } function reset() { stop(); state.elapsed = 0; update(); } document.getElementById("start").addEventListener("click", start); document.getElementById("stop").addEventListener("click", stop); document.getElementById("reset").addEventListener("click", reset); update(); |
Let’s go through the code step by step.
We first declare a state object to keep track of the stopwatch state. The running property keeps track of whether the stopwatch is currently running, the elapsed property keeps track of the elapsed time, and the intervalId property holds the ID of the interval returned by the setInterval function.
The update function is responsible for updating the stopwatch display. It calculates the minutes, seconds, and milliseconds from the elapsed time and updates the display with the padded values.
The pad function is a utility function that pads a number with a leading zero if it is less than 10.
The start function starts the stopwatch by setting up an interval that increments the elapsed time every 10 milliseconds. It also sets the running property to true.
Let’s combine all code together and see how it looks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creating a Simple Stopwatch with JavaScript</title> <style> #stopwatch { display: flex; flex-direction: column; align-items: center; } #display { font-size: 48px; margin: 20px 0; padding: 10px; border: 2px solid #333; border-radius: 10px; background-color: #f5f5f5; color: #333; text-align: center; } button { font-size: 24px; padding: 10px 20px; margin: 10px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #555; } button:active { transform: translateY(1px); } #start { background-color: #28a745; } #start:hover { background-color: #218838; } #stop { background-color: #dc3545; } #stop:hover { background-color: #c82333; } #reset { background-color: #6c757d; } #reset:hover { background-color: #5a6268; } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } #display.running { animation: blink 1s linear infinite; } </style> </head> <body> <div id="stopwatch"> <div id="display">00:00:00</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> </div> <script type="text/javascript"> let state = { running: false, elapsed: 0, intervalId: null }; function update() { let display = document.getElementById("display"); let minutes = Math.floor(state.elapsed / 60000); let seconds = Math.floor((state.elapsed % 60000) / 1000); let milliseconds = Math.floor((state.elapsed % 1000) / 10); display.innerText = `${pad(minutes)}:${pad(seconds)}:${pad(milliseconds)}`; } function pad(number) { return number < 10 ? `0${number}` : number; } function start() { if (!state.running) { state.intervalId = setInterval(() => { state.elapsed += 10; update(); }, 10); state.running = true; } } function stop() { if (state.running) { clearInterval(state.intervalId); state.running = false; } } function reset() { stop(); state.elapsed = 0; update(); } document.getElementById("start").addEventListener("click", start); document.getElementById("stop").addEventListener("click", stop); document.getElementById("reset").addEventListener("click", reset); update(); </script> </body> </html> |
Conclusion
In this article, we explained to you how to create a simple stopwatch with JavaScript. We started with the basics of JavaScript, created the HTML structure, and implemented the JavaScript code.
