Stopwatch in Bootstrap Templates

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.

Stopwatch Display Here

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. function startPause() { if (running == 0) { running = 1; increment(); document.getElementById("startPause").innerHTML = " Pause"; } else { running = 0; document.getElementById("startPause").innerHTML = " Resume"; } } And, this script below, used to reset the time in the stopwatch on the web page. The timer will automatically back to the zero. function reset() { running = 0; time = 0; document.getElementById("startPause").innerHTML = "Start"; document.getElementById("stopWatchDisplay").innerHTML = "00:00:00"; } Here's the full source code for the timer script. var time = 0; var running = 0; function startPause() { if (running == 0) { running = 1; increment(); document.getElementById("startPause").innerHTML = " Pause"; } else { running = 0; document.getElementById("startPause").innerHTML = " Resume"; } } function reset() { running = 0; time = 0; document.getElementById("startPause").innerHTML = "Start"; document.getElementById("stopWatchDisplay").innerHTML = "00:00:00"; } function increment() { if (running == 1) { setTimeout(function() { time++; var mins = Math.floor(time / 10 / 60) % 60; var secs = Math.floor(time / 10) % 60; var tenths = time % 10; if (mins

Output

Result

Add new comment