stopwatch with javascript

Solutions on MaxInterview for stopwatch with javascript by the best coders in the world

Search
showing results for - "stopwatch with javascript"
Mattia
16 Apr 2020
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}
source
Kim
24 Jul 2020
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
source
Leon
21 Jul 2018
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>
source
similar questions
javascript stopwatch codenode js stopjavascript wait for user to stop typingjavascript break for loopwait until a function finishes javascripthow to run a function when the window is closing javascriptstop a function javascriptjavascript stop delayjs propagation stopjavascript stop executionstop execution javascript
queries leading to this page
stopwatch injsstart and stop stopwatch javascriptcronometer in jsjs stop custom timercreate a stopwatch in javascriptmake stopwatch in jsstopwatch jsjavascript code stopwatchhow to make stopwatch in javascript only javascript codejavascript start stop timer samplechronometer methods javascripthow to make a js function for stopwatchhow to create a stopwatch to time task javascriptweschool stopwatch javascripthow to make a stopwatch in jsstopwatch implementation in html and jsjavascript cronometercreate stopwatch javascripthow to display stopwatch in javascriptjavascript stopwatch in w3schoolstopwatch with javascriptsimple js stopwatchstopwatch jsrun stopwatch javascript inbuilt functioncreate a simple stopwatch using jsstopwatch js code how to set a stopwatch jsjavascript chronometerstopwatch script jsmake a stopwatch in javascriptstopwatch with do whilw javascriptstopwatch javascript codecreate stopwatch javascriptvanilla js stop watchhow to build a stopwatch in javascriptjavascript stopwatch w3schoolshow to set up a stopwatch on javascriptstart a stopwatch jshow to code a stopwatch in javascriptjavascript show stopwatchstopwatch injs 27stop watch jshow to show stopwatch in javascriptstopwatch javascript simplestopwatch code in javascriptsimple stopwatch jsdisplay stopwatch in javascriptsinple js stopwatchstopwatch in javascript examplejs create stopwatchjava script stopwatchset chronometer jsmake stopwatch in pjavascript stop watch sampleequivalent stopwatch c 23 in javascriptstop watch object javascriptstopwatch timer using javascriptjavascript stopwatch functionhow to make stopwatch using jshow do you make a stopwatch in javascript 3fstopwatch js logiccreate a stopwatch in javascript step by step processjs stopwwatchsimple stopwatch using jsthe fastest way to create stopwatch in jshow to implement stopwatch in javascriptjs stopwatch timerhow to create stopwatch in javascriptmake a stopwatch in js 27creat a stop watch javascripthow make a stop watch html and jshow to make a stopwatch jsstopwatch with jsstop watch on javascript how to set up a stopwatch score in javascriptsimple stopwatch javascriptstopwatch in p jsstart a stopwatch in javascriptstopwatch using html css javascriptstopwatch using javascriptstopwatch functions javascripthow to create a stopwatch in javascriptimplement stopwatch in javascriptadding a stopwatch in jsstopwatch function in javascriptstopwatch codepin using javascriptjs stopwatchstart the stop watch from specific time of start at jsjavascript stopwatch timerjavascript stopwatch projecthow to make a stopwatch using jscreate stopwatch in javascriptstopwatch javascriptstop watch in javascriptstopwatch in javascript codestopwatch w3schoolsstart a stopwatch timer javascriptjavascript stopwatch codestopwatch function javascriptstopwatch source code in javascriptstopwatch in dib jsstopwatch using html css and javascriptcreate a stopwatch in objects in javascriptdisplay a stopwatch javascriptstopwatch html jsjs stopwatch functioneasiest way to create stopwatchjavascrip stop watchstop watch in jhsstopwatch in javascriptstop watch with stop and start button and taken taken in javascript how to create a stopwatch in jsjavscript stopwatchhow to create a stopwatch javasciptjavascript making a stopwatchhow to add the stopwatch in html or jshow to make a stopwatch in js 3fprogram to make stopwatch ja javascriptjavascript stop watchstopwatch program in javascriptstoptimer 28 29 javascripthow to create stopwatch using javascripthow to make a stopwatch in javascripthow to make a stopwatch with javascriptstopwatch javascript w3schoolsjs stopwatch simplejavascript stopwatch samplebuilding stopwatch javascripthow to set a stopwatchin jshow to make a stopwatch in js with milisecondjavascript stopwatch examplestopwatch using jshow to set up a stopwatch in javascriptmake stopwatch in javascriptstopwatch javascript stopwatchstopwatch object in javascripthow to stop a stopwatch using jshow to build a stop watch in javascripthow to make a stopwatch javascripteasiest way to create stopwatch in jshow to make a simple stopwatch in javascriptshow the user a stopwatch jshow to create a stopwatch with javascriptstopwatch javascriptjavascript stopwatch libraryjavascript stopwatch downloadjavascript code for stop watchsimple stopwatch in javascriptmake a stopwatch javascriptstopwatchscript jsjavaascript stopwatchjs object stopwatchstop a stopwatch javascriptstopwatch timer in javascriptstopwatch javascirptstopwatch js w3how to write stopwatch time in javascripthow to make stopwatch in jsmake stopwatch jsjavascript stopwatchjavascript stopwatshhow to make a stipwatch in jsstopwatch in js javascript stopwatchstopwatch using html which takes timer from useruse stopwatch in jshow to make stopwatch in javascriptjavascript timer stopwatch examplestopwatch timer javascriptstopwatch with action in javascriptstopwatch wuth javascriptstopwatch using javascript source codestopwatch with javascript