Stopwatch in Bootstrap Templates

Submitted by azalea zenith on Saturday, October 8, 2016 - 09:57.
In this tutorial, we are going to learn how to create Stopwatch in Bootstrap Templates. The feature of this simple tutorial has the function to start the stopwatch, to pause, to resume, and to reset the stopwatch back to zero. If you hit the reset button the timer will automatically back to zero then press the start button to begin. Look for the Live Demo, click the button below. Thank you. Create simple markup for the controls of the timer and display of the stopwatch in the web page. This is a simple source code so all we can easy to learn on how to create simple stopwatch on your web page.
  1. <div style="width:40%;">
  2.    <div>
  3.       <p id="stopWatchDisplay" style="font-size:18px; font-weight:bold; font-family:cursive;">Stopwatch Display Here</p>
  4.    </div>
  5.    <div id="controls">
  6.       <button id="startPause" onClick="startPause()"><i></i> Start</button>
  7.       <button onClick="reset()"><i></i> Reset</button>
  8.    </div>
  9. </div>
As you can see the source code below, that's the script to control the timer on the web page, where you can start the time and to pause the time in just one click the button.
  1. function startPause() {
  2.     if (running == 0) {
  3.         running = 1;
  4.         increment();
  5.         document.getElementById("startPause").innerHTML = "<i class='glyphicon glyphicon-pause'></i> Pause";
  6.     } else {
  7.         running = 0;
  8.         document.getElementById("startPause").innerHTML = "<i class='glyphicon glyphicon-repeat'></i> Resume";
  9.     }
  10. }
And, this script below, used to reset the time in the stopwatch on the web page. The timer will automatically back to the zero.
  1. function reset() {
  2.     running = 0;
  3.     time = 0;
  4.     document.getElementById("startPause").innerHTML = "Start";
  5.     document.getElementById("stopWatchDisplay").innerHTML = "00:00:00";
  6. }
Here's the full source code for the timer script.
  1. var time = 0;
  2. var running = 0;
  3.  
  4. function startPause() {
  5.     if (running == 0) {
  6.         running = 1;
  7.         increment();
  8.         document.getElementById("startPause").innerHTML = "<i class='glyphicon glyphicon-pause'></i> Pause";
  9.     } else {
  10.         running = 0;
  11.         document.getElementById("startPause").innerHTML = "<i class='glyphicon glyphicon-repeat'></i> Resume";
  12.     }
  13. }
  14.  
  15. function reset() {
  16.     running = 0;
  17.     time = 0;
  18.     document.getElementById("startPause").innerHTML = "Start";
  19.     document.getElementById("stopWatchDisplay").innerHTML = "00:00:00";
  20. }
  21.  
  22. function increment() {
  23.     if (running == 1) {
  24.         setTimeout(function() {
  25.             time++;
  26.             var mins = Math.floor(time / 10 / 60) % 60;
  27.             var secs = Math.floor(time / 10) % 60;
  28.             var tenths = time % 10;
  29.  
  30.             if (mins < 10) {
  31.                 mins = "0" + mins;
  32.             }
  33.             if (secs < 10) {
  34.                 secs = "0" + secs;
  35.             }
  36.             document.getElementById("stopWatchDisplay").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
  37.             increment();
  38.         }, 100);
  39.     }
  40. }

Output

Result
Tags
Stopwatch in Bootstrap Templates
Stopwatch
Start Timer
Pause Timer
Reset Timer
Timer JavaScript

Add new comment

About text formats
  • 1490 views