TheDealer
OVA Enthusiast
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
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.
⚙ Live Demo
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.
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.
And, this script below, used to reset the time in the stopwatch on the web page. The timer will automatically back to the zero.
Here's the full source code for the timer script.
⚙ Live Demo
Output
Download
Look for the Live Demo, click the button below. Thank you.
⚙ Live Demo
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.
- <div
style
=
"width:40%;"
>
- <div
>
- <p
id
=
"stopWatchDisplay"
style
=
"font-size:18px; font-weight:bold; font-family:cursive;"
>
Stopwatch Display Here</
p
>
- </
div
>
- <div
id
=
"controls"
>
- <button
id
=
"startPause"
onClick
=
"startPause()"
><i
></
i
>
Start</
button
>
- <button
onClick
=
"reset()"
><i
></
i
>
Reset</
button
>
- </
div
>
- </
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.
- function
startPause(
)
{
- if
(
running ==
0
)
{
- running =
1
;
- increment(
)
;
- document.getElementById
(
"startPause"
)
.innerHTML
=
"<i class='glyphicon glyphicon-pause'></i> Pause"
;
- }
else
{
- running =
0
;
- document.getElementById
(
"startPause"
)
.innerHTML
=
"<i class='glyphicon glyphicon-repeat'></i> 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
=
"<i class='glyphicon glyphicon-pause'></i> Pause"
;
- }
else
{
- running =
0
;
- document.getElementById
(
"startPause"
)
.innerHTML
=
"<i class='glyphicon glyphicon-repeat'></i> 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 <
10
)
{
- mins =
"0"
+
mins;
- }
- if
(
secs <
10
)
{
- secs =
"0"
+
secs;
- }
- document.getElementById
(
"stopWatchDisplay"
)
.innerHTML
=
mins +
":"
+
secs +
":"
+
"0"
+
tenths;
- increment(
)
;
- }
,
100
)
;
- }
- }
⚙ Live Demo
Output
Download
You must upgrade your account or reply in the thread to view hidden text.