****** USING NOTEPAD++ ***** Create a Web page with the following 3 buttons: <in

Question

****** USING NOTEPAD++ *****

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

<input id="timer" value="1"><br>
<button id="start">Start Timer</button>
<button id="stop">Stop Timer</button>
<button id="reset">Reset Timer</button>

<hr>
<p id="logger"></p>
<script>
function Timer(fn, t) {
var timerObj = setInterval(fn, t);

this.stop = function() {
if (timerObj) {
clearInterval(timerObj);
timerObj = null;
}
return this;
}

  
this.start = function() {
if (!timerObj) {
this.stop();
timerObj = setInterval(fn, t);
}
return this;
}

// start with new interval, stop current interval
this.reset = function(newT) {
t = newT;
       cntr=0
       logTop(cntr)
return this.stop();
}
}

function logTop(msg) {
document.getElementById("logger").innerHTML=msg;
  
}

var cntr = 1;
var startTime = Date.now();
var timer = new Timer(function() {
logTop(cntr++ );
}, 1000);

document.getElementById("reset").addEventListener("click", function(e)
{
var newTime = +document.getElementById("timer").value * 1000;
if (newTime) {
timer.reset(newTime);
}
});

document.getElementById("start").addEventListener("click", function(e) {
   timer.start();
});

document.getElementById("stop").addEventListener("click", function(e) {
timer.stop();
});

</script>

Related Questions

Navigate

• Browse (All)
• Browse #
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.