Stop Watch with Milliseconds Using Bootstrap 5

by
Stop Watch with Milliseconds Using Bootstrap 5
Code Snippet:Stop watch
Author: Abhinav Rawat
Published: January 29, 2024
Last Updated: February 3, 2024
Downloads: 691
License: MIT
Edit Code online: CodeHim
Read More
 Demo
Download (File not found!)

This code implements a responsive stop watch with milliseconds using Bootstrap 5. The stopwatch displays hours, minutes, seconds, and milliseconds. You can start and stop the stopwatch with the “Start/Stop” button and reset it with the “Reset” button. The circular frame and controls are styled with Bootstrap, ensuring a visually appealing and user-friendly design. It’s a helpful tool for tracking time accurately in various scenarios.

How to Create Stop Watch With Milliseconds Using Bootstrap 5

1. First of all, include the necessary Bootstrap and Font Awesome CDN links in the <head> section of your HTML file.

  1. <!-- Bootstrap 5 CSS -->
  2. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  3.  
  4. <!-- Font Awesome Icons -->
  5. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">

2. In HTML, create a container with the required elements for the stopwatch.

  1. <div id="stopwatch-container">
  2.         <!-- Outer frame containing the circular frame and stopwatch -->
  3.         <div id="outer-frame">
  4.             <div id="outer-circle">
  5.                 <div id="stopwatch">00:00:00:00:00:00:000</div>
  6.             </div>
  7.         </div>
  8.  
  9.         <!-- Controls for the stopwatch -->
  10.         <div id="controls">
  11.             <button class="btn btn-primary" onclick="startStop()">
  12.                 <i class="fas fa-play"></i> Start/Stop
  13.             </button>
  14.             <button class="btn btn-danger" onclick="reset()">
  15.                 <i class="fas fa-stop"></i> Reset
  16.             </button>
  17.         </div>
  18.     </div>

3. Add the required styles to make the stopwatch visually appealing. Customize the colors, fonts, and sizes according to your preference.

  1. body {
  2.             font-family: 'Arial', sans-serif;
  3.             display: flex;
  4.             align-items: center;
  5.             justify-content: center;
  6.             height: 100vh;
  7.             margin: 0;
  8.             background-color: #2c3e50 !important; /* Dark grey background color */
  9.             color: #ecf0f1; /* Light text color */
  10.     }
  11.         #stopwatch-container {
  12.             text-align: center;
  13.         }
  14.         #outer-frame {
  15.             width: 260px;
  16.             height: 260px;
  17.             border: 5px solid #ecf0f1; /* Circular frame color */
  18.             border-radius: 50%;
  19.             display: flex;
  20.             align-items: center;
  21.             justify-content: center;
  22.             margin: 0 auto; /* Center the frame */
  23.         }
  24.         #outer-circle {
  25.             width: 220px;
  26.             height: 220px;
  27.             border-radius: 50%;
  28.             background-color: #3498db;
  29.             display: flex;
  30.             align-items: center;
  31.             justify-content: center;
  32.         }
  33.         #stopwatch {
  34.             font-size: 2em;
  35.             color: #fff;
  36.         }
  37.         #controls {
  38.             margin-top: 20px;
  39.         }
  40.         button {
  41.             font-size: 1em;
  42.             padding: 10px 20px;
  43.             margin: 0 5px;
  44.             cursor: pointer;
  45.         }

4. Now, load the Bootstrap 5 JS, Popper JS, and jQuery by adding the following CDN links before closing the body tag:

  1. <!-- Bootstrap 5 JS, Popper.js, and jQuery -->
  2. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  3. <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

5. Finally, include the following JavaScript code for the stopwatch functionality. This code handles starting, stopping, resetting, and updating the display with the elapsed time:

  1.         let startTime;
  2.         let accumulatedTime = 0;
  3.         let running = false;
  4.  
  5.         function startStop() {
  6.             if (running) {
  7.                 running = false;
  8.             } else {
  9.                 startTime = null;
  10.                 requestAnimationFrame(updateTime);
  11.                 running = true;
  12.             }
  13.         }
  14.  
  15.         function reset() {
  16.             accumulatedTime = 0;
  17.             updateDisplay();
  18.             running = false;
  19.         }
  20.  
  21.         function updateTime(timestamp) {
  22.             if (!startTime) {
  23.                 startTime = timestamp;
  24.             }
  25.  
  26.             if (!running) return;
  27.  
  28.             accumulatedTime = timestamp - startTime;
  29.             updateDisplay();
  30.  
  31.             requestAnimationFrame(updateTime);
  32.         }
  33.  
  34.         function updateDisplay() {
  35.             const totalMilliseconds = Math.floor(accumulatedTime);
  36.             const days = Math.floor(totalMilliseconds / (24 * 60 * 60 * 1000));
  37.             const hours = Math.floor((totalMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  38.             const minutes = Math.floor((totalMilliseconds % (60 * 60 * 1000)) / (60 * 1000));
  39.             const seconds = Math.floor((totalMilliseconds % (60 * 1000)) / 1000);
  40.             const milliseconds = totalMilliseconds % 1000;
  41.  
  42.             const timeString = `${formatTime(days)}:${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}:${formatTime(milliseconds, 3)}`;
  43.             document.getElementById('stopwatch').innerText = timeString;
  44.         }
  45.  
  46.         function formatTime(value, digits = 2) {
  47.             const paddedValue = value.toString().padStart(digits, '0');
  48.             return paddedValue.substring(0, digits);
  49.         }
  50.  
  51.         // Add event listener to stop the stopwatch on any touch
  52.         $(document).on('touchstart', function () {
  53.             running = false;
  54.         });
  55.  
  56.         // Initial display
  57.         updateDisplay();

That’s all! hopefully, you have successfully created a stopwatch with milliseconds using Bootstrap 5. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X