Create a Web page with the following 3 buttons: <input type=\"button\" id=\"star
ID: 3906913 • Letter: C
Question
Create a Web page with the following 3 buttons:
<input type="button" id="startTimer" value="Start Timer" /><br />
<input type="button" id="stopTimer" value="Stop Timer" onclick=" " /><br />
<input type="button" id="resetTimer" value="Reset Timer" onclick=" " /><br />
The start button should start a timer displayed on this page beginning at zero and incrementing (counting up) at one second intervals. HINT: use the CSS innerHTML property to display your timer.
The stop button should stop the timer at whatever number it has reached. If this button is clicked at 8 seconds, the time should freeze at 8. If the start button is then clicked, the timing should resume beginning with 8.
The reset button should stop the timer and reset it to zero.
The function of this program must work no matter how often the buttons are clicked or in what order they are clicked.
Explanation / Answer
If you have any doubts, please give me comment....
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 id="dispTimer"></h2>
<input type="button" id="startTimer" value="Start Timer" /><br />
<input type="button" id="stopTimer" value="Stop Timer" /><br />
<input type="button" id="resetTimer" value="Reset Timer" /><br />
<script type="text/javascript">
var time = 0;
var timer;
function startTimer() {
time++;
document.getElementById("dispTimer").innerHTML = time;
timer = setTimeout(startTimer, 1000);
}
function resetTimer() {
time = 0;
}
function stopTimer() {
clearTimeout(timer);
}
</script>
</body>
</html>