1var x;
2var startstop = 0;
3
4function startStop() { /* Toggle StartStop */
5
6 startstop = startstop + 1;
7
8 if (startstop === 1) {
9 start();
10 document.getElementById("start").innerHTML = "Stop";
11 } else if (startstop === 2) {
12 document.getElementById("start").innerHTML = "Start";
13 startstop = 0;
14 stop();
15 }
16
17}
18
19
20function start() {
21 x = setInterval(timer, 10);
22} /* Start */
23
24function stop() {
25 clearInterval(x);
26} /* Stop */
27
28var milisec = 0;
29var sec = 0; /* holds incrementing value */
30var min = 0;
31var hour = 0;
32
33/* Contains and outputs returned value of function checkTime */
34
35var miliSecOut = 0;
36var secOut = 0;
37var minOut = 0;
38var hourOut = 0;
39
40/* Output variable End */
41
42
43function timer() {
44 /* Main Timer */
45
46
47 miliSecOut = checkTime(milisec);
48 secOut = checkTime(sec);
49 minOut = checkTime(min);
50 hourOut = checkTime(hour);
51
52 milisec = ++milisec;
53
54 if (milisec === 100) {
55 milisec = 0;
56 sec = ++sec;
57 }
58
59 if (sec == 60) {
60 min = ++min;
61 sec = 0;
62 }
63
64 if (min == 60) {
65 min = 0;
66 hour = ++hour;
67
68 }
69
70
71 document.getElementById("milisec").innerHTML = miliSecOut;
72 document.getElementById("sec").innerHTML = secOut;
73 document.getElementById("min").innerHTML = minOut;
74 document.getElementById("hour").innerHTML = hourOut;
75
76}
77
78
79/* Adds 0 when value is <10 */
80
81
82function checkTime(i) {
83 if (i < 10) {
84 i = "0" + i;
85 }
86 return i;
87}
88
89function reset() {
90
91
92 /*Reset*/
93
94 milisec = 0;
95 sec = 0;
96 min = 0
97 hour = 0;
98
99 document.getElementById("milisec").innerHTML = "00";
100 document.getElementById("sec").innerHTML = "00";
101 document.getElementById("min").innerHTML = "00";
102 document.getElementById("hour").innerHTML = "00";
103
104}
1//create a function to stop the time function stopTime( ) {
2/* check if seconds, minutes and hours are not equal to 0 */
3<!DOCTYPE html>
4<html lang="en">
5<head>
6<title> JavaScript Stop Watch </title>
7<style text="text/css">
8 #stopWatch { width: 2100px;
9height: auto;
10text-align: center;
11display: block;
12padding: 5px;
13margin: 0 auto; }
14#timer, #fulltime { width: auto;
15height: auto;
16padding: 10px;
17font-weight: bold;
18font-family: tahoma;
19display: block;
20border: 1px solid #eee;
21text-align: center;
22box-shadow: 0 0 5px #ccc;
23background: #fbfbf0;
24color: darkblue;
25border-bottom:4px solid darkgrey; }
26button { cursor: pointer; font-weight: 700; }
27#fulltime { display:none; font-size:16px; font-weight:bold; }
28</style>
29<script type="text/javascript">
30</script>
31</head>
32<body>
33<section id="stopWatch">
34<p id="timer"> Time : 00:00:00 </p>
35<button id="start"> Start </button>
36<button id="stop"> Stop </button>
37<p id="fulltime"> </p>
38</section>
39<script>
40 if ( seconds !== 0 || minutes !== 0 || hours !== 0 ) {
41 /* display the full time before reseting the stop watch */
42 var fulltime = document .getElementById( "fulltime" );
43 //display the full time fulltime.style.display = "block";
44 var time = gethours + mins + secs;
45 fulltime.innerHTML = 'Fulltime: ' + time;
46 // reset the stop watch seconds = 0; minutes = 0; hours = 0; secs = '0' + seconds; mins = '0' + minutes + ': '; gethours = '0' + hours + ': '; /* display the stopwatch after it's been stopped */ var x = document.getElementById ("timer"); var stopTime = gethours + mins + secs; x.innerHTML = stopTime; /* display all stop watch control buttons */ var showStart = document.getElementById ('start'); showStart.style.display = "inline-block"; var showStop = document.getElementById ("stop"); showStop.style.display = "inline-block"; /* clear the stop watch using the setTimeout( ) return value 'clearTime' as ID */ clearTimeout( clearTime ); } // if () } // stopTime() /* you need to call the stopTime( ) function to terminate the stop watch */ window.addEventListener( 'load', function ( ) { var stop = document.getElementById ("stop"); stop.addEventListener( 'click', stopTime ); }); // stopwatch.js end
47</script>
48</body>
49</html>
50
51
52
53
54
55
56
57
1<h1>
2 <span id="hour">00</span> :
3 <span id="min">00</span> :
4 <span id="sec">00</span> :
5 <span id="milisec">00</span>
6</h1>
7
8<button onclick="startStop()" id="start">Start</button>
9<button onclick="reset()">Reset</button>