I would like to add window.onblur
and window.onfocus
to this existing counter script which works. I want to stop timer onblur and start timer again onfocus.
I can not make it work and I do not do how to do it. I tried various possibilities. But I am a beginner. Please help if you can. Here is the working code which needs onblur and onfocus:
$topbaroutput .= "
<script>
window.jQuery || document.write('<script src="jquery-2.2.4.min.js"><\/script>');
</script>
<table bgcolor="$bgcolor" border=0 cellpadding=0 cellspacing=0 width=40>
<tr><td align=center>
<div id="timer" style="font-size: 12pt; color: $fontColor; margin: 4px; "></div>
</td></tr>
</table>
<script language="javascript">
var timer=".$timer.";
function run () {
if (timer <= 0) {
document.getElementById("myform").style.visibility="visible";
document.getElementById("timer").innerHTML="GO";
} else {
document.getElementById("timer").innerHTML=timer;
timer--; setTimeout(run, 1000);
}
}
Here is the other counter code which works, but I need to make the other counter script with the help of these:
<!DOCTYPE html>
<html>
<body>
<div id="timer"></div>
<script>
var timer = 20;
var t;
var timer_is_on = 0;
function run() {
document.getElementById("timer").innerHTML=timer;
timer = timer - 1;
t = setTimeout(function(){ run() }, 1000);
}
window.onblur = function counterstops() {
clearTimeout(t);
timer_is_on = 0;
}
window.onfocus = function counterstarts() {
if (!timer_is_on) {
timer_is_on = 1;
run();
}
}
</script>
</body>
</html>