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: 280px;
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
1const timer = document.getElementById('stopwatch');
2
3var hr = 0;
4var min = 0;
5var sec = 0;
6var stoptime = true;
7
8function startTimer() {
9 if (stoptime == true) {
10 stoptime = false;
11 timerCycle();
12 }
13}
14function stopTimer() {
15 if (stoptime == false) {
16 stoptime = true;
17 }
18}
19
20function timerCycle() {
21 if (stoptime == false) {
22 sec = parseInt(sec);
23 min = parseInt(min);
24 hr = parseInt(hr);
25
26 sec = sec + 1;
27
28 if (sec == 60) {
29 min = min + 1;
30 sec = 0;
31 }
32 if (min == 60) {
33 hr = hr + 1;
34 min = 0;
35 sec = 0;
36 }
37
38 if (sec < 10 || sec == 0) {
39 sec = '0' + sec;
40 }
41 if (min < 10 || min == 0) {
42 min = '0' + min;
43 }
44 if (hr < 10 || hr == 0) {
45 hr = '0' + hr;
46 }
47
48 timer.innerHTML = hr + ':' + min + ':' + sec;
49
50 setTimeout("timerCycle()", 1000);
51 }
52}
53
54function resetTimer() {
55 timer.innerHTML = '00:00:00';
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>