Create a Web page with the following 3 buttons: <input type=\"button\" id=\"star
ID: 3906752 • 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
<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
</head>
<style>
p
{
font-size:40px;
color:tomato;
font-family:verdana;
}
</style>
<body>
<center>
<p id = "clock">00:00:00</p>
<input type="button" id="startTimer" value="Start Timer" />
<input type="button" id="stopTimer" value="Stop Timer" />
<input type="button" id="resetTimer" value="Reset Timer" />
</center>
</body>
<script>
stopwatch = document.getElementById("clock");
var sec = 0, minute = 0, hours = 0;
var time;
function clock()
{
sec++;
if (sec >= 60)
{
sec = 0;
minute++;
if (minute >= 60)
{
minute = 0;
hours++;
}
}
var str = (hours ? (hours > 9 ? hours : "0" + hours) : "00")//hours setting
str+= ":" + (minute ? (minute > 9 ? minute : "0" + minute) : "00")//minutes setting
str+= ":" + (sec > 9 ? sec : "0" + sec);//seconds setting
stopwatch.innerHTML = str
timer();
}
function timer() {
time = setTimeout(clock, 1000);
//console.log(stopwatch.innerHTML);
}
// Start button
function start()
{
timer();
}
// Stop button
function stop() {
clearTimeout(time);
}
// Reset button
function reset() {
stopwatch.innerHTML = "00:00:00";
sec = 0; minute = 0; hours = 0;
}
</script>
</html>