MY PROBLEM IS MILLISECONS INCREASING ONLY WHEN I CLICK START Digital clock with
ID: 3736615 • Letter: M
Question
MY PROBLEM IS MILLISECONS INCREASING ONLY WHEN I CLICK START
Digital clock with stopwatch
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
<script>
"use strict";
var $ = function(id) { return document.getElementById(id); };
var evt = {
attach: function(node, eventName, func) {
document.getElementById(node).addEventListener(eventName, func);
},
detach: function(node, eventName, func) {
document.getElementById(node).removeEventListener(eventName, func);
},
preventDefault: function(e) {
if(typeof e !== 'undefined'){
evt.preventDefault();
}
}
};
//global stop watch timer variable and elapsed time object
var stopwatchTimer;
var elapsed = {minutes: 0, seconds: 0, milliseconds: 0};
var displayCurrentTime = function() {
var now = new Date();
var hours = now.getHours();
var ampm = "AM"; // set default value
// correct hours and AM/PM value for display
if (hours > 12) { // convert from military time
hours = hours - 12;
ampm = "PM";
} else { // adjust 12 noon and 12 midnight
switch (hours) {
case 12: // noon
ampm = "PM";
break;
case 0: // midnight
hours = 12;
ampm = "AM";
}
}
$("hours").firstChild.nodeValue = hours;
$("minutes").firstChild.nodeValue = padSingleDigit(now.getMinutes());
$("seconds").firstChild.nodeValue = padSingleDigit(now.getSeconds());
$("ampm").firstChild.nodeValue = ampm;
};
var padSingleDigit = function(num) {
if (num < 10) { return "0" + num; }
else { return num; }
};
var tickStopwatch = function() {
// increment milliseconds by 10 milliseconds
elapsed.milliseconds+=10;
// if milliseconds total 1000, increment seconds by one and reset milliseconds to zero
if(elapsed.milliseconds==1000){
elapsed.seconds+=1;
elapsed.milliseconds=0;
}
// if seconds total 60, increment minutes by one and reset seconds to zero
if(elapsed.seconds==60){
elapsed.minutes+=1;
elapsed.seconds=0;
}
//display new stopwatch time
$("s_minutes").firstChild.nodeValue = elapsed.minutes;
$("s_seconds").firstChild.nodeValue =elapsed.seconds;
$("s_ms").firstChild.nodeValue =elapsed.milliseconds;
};
// event handler functions
var startStopwatch = function(e) {
// prevent default action of link
evt.preventDefault(e);
// do first tick of stop watch and then set interval timer to tick
tickStopwatch();
// stop watch every 10 milliseconds. Store timer object in stopwatchTimer
stopwatchTimer=setInterval(stopStopwatch, 10);
// variable so next two functions can stop timer.
};
var stopStopwatch = function(e) {
// prevent default action of link
evt.preventDefault(e);
// stop timer
clearInterval(stopwatchTimer);
};
var resetStopwatch = function(e) {
// prevent default action of link
evt.preventDefault(e);
// stop timer
clearInterval(stopwatchTimer);
// clear elapsed object and reset stopwatch display
elapsed.minutes=0;
elapsed.seconds=0;
elapsed.milliseconds=0;
$("s_minutes").firstChild.nodeValue = elapsed.minutes;
$("s_seconds").firstChild.nodeValue =elapsed.seconds;
$("s_ms").firstChild.nodeValue =elapsed.milliseconds;
};
window.onload = function() {
// set initial clock display and then set interval timer to display
// new time every second. Don't store timer object because it
// won't be needed - clock will just run.
displayCurrentTime();
setInterval(displayCurrentTime, 1000);
// set up stopwatch event handlers
$("start").onclick = function() { startStopwatch(evt);};
$("stop").onclick = function() { stopStopwatch(evt);};
$("reset").onclick = function() { resetStopwatch(evt);};
};</script>
</head>
<body>
<main>
<h1>Digital clock with stopwatch</h1>
<fieldset>
<legend>Clock</legend>
<span id="hours"> </span>:
<span id="minutes"> </span>:
<span id="seconds"> </span>
<span id="ampm"> </span>
</fieldset>
<fieldset>
<legend>Stop Watch</legend>
<a href="#" id="start">Start</a>
<a href="#" id="stop">Stop</a>
<a href="#" id="reset">Reset</a>
<span id="s_minutes">00</span>:
<span id="s_seconds">00</span>:
<span id="s_ms">000</span>
</fieldset>
</main>
</body>
</html>
Clock : : Stop Watch Start Stop Reset 00: 00: 000
Explanation / Answer
//use this code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
<script>
"use strict";
var $ = function(id) { return document.getElementById(id); };
var evt = {
attach: function(node, eventName, func) {
document.getElementById(node).addEventListener(eventName, func);
},
detach: function(node, eventName, func) {
document.getElementById(node).removeEventListener(eventName, func);
},
preventDefault: function(e) {
if(typeof e !== 'undefined'){
evt.preventDefault();
}
}
};
//global stop watch timer variable and elapsed time object
var stopwatchTimer;
var elapsed = {minutes: 0, seconds: 0, milliseconds: 0};
var displayCurrentTime = function() {
var now = new Date();
var hours = now.getHours();
var ampm = "AM"; // set default value
// correct hours and AM/PM value for display
if (hours > 12) { // convert from military time
hours = hours - 12;
ampm = "PM";
} else { // adjust 12 noon and 12 midnight
switch (hours) {
case 12: // noon
ampm = "PM";
break;
case 0: // midnight
hours = 12;
ampm = "AM";
}
}
$("hours").firstChild.nodeValue = hours;
$("minutes").firstChild.nodeValue = padSingleDigit(now.getMinutes());
$("seconds").firstChild.nodeValue = padSingleDigit(now.getSeconds());
$("ampm").firstChild.nodeValue = ampm;
};
var padSingleDigit = function(num) {
if (num < 10) { return "0" + num; }
else { return num; }
};
var tickStopwatch = function() {
// increment milliseconds by 10 milliseconds
elapsed.milliseconds+=10;
// if milliseconds total 1000, increment seconds by one and reset milliseconds to zero
if(elapsed.milliseconds>=1000){
elapsed.seconds+=1;
elapsed.milliseconds=0;
}
// if seconds total 60, increment minutes by one and reset seconds to zero
if(elapsed.seconds>=60){
elapsed.minutes+=1;
elapsed.seconds=0;
}
//display new stopwatch time
$("s_minutes").innerHTML =padSingleDigit( elapsed.minutes);
$("s_seconds").innerHTML =padSingleDigit(elapsed.seconds);
$("s_ms").innerHTML =elapsed.milliseconds;
};
// event handler functions
var startStopwatch = function(e) {
// prevent default action of link
evt.preventDefault(e);
// do first tick of stop watch and then set interval timer to tick
setInterval(tickStopwatch,10);
// stop watch every 10 milliseconds. Store timer object in stopwatchTimer
stopwatchTimer=setInterval(stopStopwatch, 10);
// variable so next two functions can stop timer.
};
var stopStopwatch = function(e) {
// prevent default action of link
evt.preventDefault(e);
// stop timer
clearInterval(stopwatchTimer);
};
var resetStopwatch = function(e) {
// prevent default action of link
evt.preventDefault(e);
// stop timer
clearInterval(stopwatchTimer);
// clear elapsed object and reset stopwatch display
elapsed.minutes=0;
elapsed.seconds=0;
elapsed.milliseconds=0;
$("s_ms").innerHTML = "000";
$("s_seconds").innerHTML = "00";
$("s_minutes").innerHTML = "00";
};
window.onload = function() {
// set initial clock display and then set interval timer to display
displayCurrentTime();
// new time every second. Don't store timer object because it
setInterval(displayCurrentTime, 1000);
// won't be needed - clock will just run.
// set up stopwatch event handlers
$("start").onclick = function() { startStopwatch(evt);};
$("stop").onclick = function() { stopStopwatch(evt);};
$("reset").onclick = function() { resetStopwatch(evt);};
};
</script>
</head>
<body>
<main>
<h1>Digital clock with stopwatch</h1>
<fieldset>
<legend>Clock</legend>
<span id="hours"> </span>:
<span id="minutes"> </span>:
<span id="seconds"> </span>
<span id="ampm"> </span>
</fieldset>
<fieldset>
<legend>Stop Watch</legend>
<a href="#" id="start">Start</a>
<a href="#" id="stop">Stop</a>
<a href="#" id="reset">Reset</a>
<span id="s_minutes">00</span>:
<span id="s_seconds">00</span>:
<span id="s_ms">000</span>
</fieldset>
</main>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.