Skip to content

Commit b3494f2

Browse files
learning-zonelearning-zone
committed
Stopwatch
1 parent 61ede57 commit b3494f2

1 file changed

Lines changed: 55 additions & 88 deletions

File tree

‎README.md‎

Lines changed: 55 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -111,107 +111,74 @@ File Extension: jpg
111111
<head>
112112
<title>Stopwatch Example</title>
113113
</head>
114+
114115
<body>
115-
<form action="" method="post">
116-
<h4>Simple stopwatch made in JavaScript</h4>
117-
<input type="button" onclick="startWatch()" value="START" />
118-
<input type="button" onclick="stopWatch()" value="STOP" />
119-
<input type="button" onclick="resetWatch()" value="ZERO" />
120-
</form>
121-
<p id="res">
122-
<span id="min">0</span> : <span id="sec">00</span> :
123-
<span id="msec">000</span>
124-
</p>
125-
<p>
126-
In this example Date() methods co-operate with timing function
127-
setInterval().
128-
</p>
116+
<h4>Time: <span id="time">00:00:00</span><h4> <br /><br />
117+
<button id="start" onclick="start()">Start</button>
118+
<button id="stop" onclick="stop()">Stop</button>
119+
<button id="reset" onclick="reset()">Reset</button>
129120

130121
<script type="text/javascript">
131-
var timer = null;
132-
var min_txt = document.getElementById("min");
133-
var min = Number(min_txt.innerHTML);
134-
var sec_txt = document.getElementById("sec");
135-
var sec = Number(sec_txt.innerHTML);
136-
var msec_txt = document.getElementById("msec");
137-
var msec = Number(msec_txt.innerHTML);
138-
function stopTimeMilliseconds(timer) {
139-
if (timer) {
140-
clearInterval(timer);
141-
return timer;
142-
} else return timer;
143-
}
144-
function startTimeMilliseconds() {
145-
var currDate = new Date();
146-
return currDate.getTime();
147-
}
148-
function getElapsedTimeMilliseconds(startMilliseconds) {
149-
if (startMilliseconds > 0) {
150-
var currDate = new Date();
151-
elapsedMilliseconds = currDate.getTime() - startMilliseconds;
152-
return elapsedMilliseconds;
153-
} else {
154-
return (elapsedMilliseconds = 0);
122+
const time = document.getElementById("time");
123+
const startBtn = document.getElementById("start");
124+
125+
let timer;
126+
let seconds = 0;
127+
let hours = 0;
128+
let minutes = 0;
129+
let MINUTES_IN_HOUR = 60;
130+
let SECONDS_IN_MINUTE = 60;
131+
132+
function updateTimer() {
133+
seconds++;
134+
if (seconds >= SECONDS_IN_MINUTE) {
135+
seconds = 0;
136+
minutes++;
137+
if (minutes >= MINUTES_IN_HOUR) {
138+
minutes = 0;
139+
hours++;
140+
}
155141
}
142+
143+
time.textContent =
144+
(hours ? (hours > 9 ? hours : "0" + hours) : "00") +
145+
":" +
146+
(minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
147+
":" +
148+
(seconds > 9 ? seconds : "0" + seconds);
149+
150+
// start timer again
151+
start();
156152
}
157-
function startWatch() {
158-
// START TIMER
159-
timer = stopTimeMilliseconds(timer);
160-
var startMilliseconds = startTimeMilliseconds();
161-
timer = setInterval(function () {
162-
var elapsedMilliseconds = getElapsedTimeMilliseconds(
163-
startMilliseconds
164-
);
165-
if (msec < 10) {
166-
msec_txt.innerHTML = "00" + msec;
167-
} else if (msec < 100) {
168-
msec_txt.innerHTML = "0" + msec;
169-
} else {
170-
msec_txt.innerHTML = msec;
171-
}
172-
if (sec < 10) {
173-
sec_txt.innerHTML = "0" + sec;
174-
} else {
175-
sec_txt.innerHTML = sec;
176-
}
177-
min_txt.innerHTML = min;
178-
msec = elapsedMilliseconds;
179-
if (min >= 59 && sec >= 59 && msec > 900) {
180-
timer = stopTimeMilliseconds(timer);
181-
return true;
182-
}
183-
if (sec > 59) {
184-
sec = 0;
185-
min++;
186-
}
187-
if (msec > 999) {
188-
msec = 0;
189-
sec++;
190-
startWatch();
191-
}
192-
}, 10);
153+
154+
function start() {
155+
timer = setTimeout(updateTimer, 1000);
156+
startBtn.disabled = true;
193157
}
194-
function stopWatch() {
195-
// STOP TIMER
196-
timer = stopTimeMilliseconds(timer);
197-
return true;
158+
159+
function stop() {
160+
clearTimeout(timer);
161+
startBtn.disabled = false;
198162
}
199-
function resetWatch() {
200-
// REZERO TIMER
201-
timer = stopTimeMilliseconds(timer);
202-
msec_txt.innerHTML = "000";
203-
msec = 0;
204-
sec_txt.innerHTML = "00";
205-
sec = 0;
206-
min_txt.innerHTML = "0";
207-
min = 0;
208-
return true;
163+
164+
function reset() {
165+
time.textContent = "00:00:00";
166+
seconds = 0;
167+
minutes = 0;
168+
hours = 0;
169+
startBtn.disabled = false;
209170
}
171+
172+
window.start = start;
173+
window.reset = reset;
174+
window.stop = stop;
210175
</script>
211176
</body>
212177
</html>
213178
```
214179

180+
**&#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-cp-captcha-mzyi2n?file=/index.html)**
181+
215182
<div align="right">
216183
<b><a href="#">↥ back to top</a></b>
217184
</div>

0 commit comments

Comments
 (0)