onblur和onfocus事件进入现有的计数器脚本

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>

<script language="text/javascript">
  var SuperCoolTimerClass = function() {
      // This was previously a string value but below you treat it
      //  as a numeric value.  I changed this to be an arbitrary 
      //  numeric value.
      var timerCount = 100;
      var timerTimeoutReference;
      var timer_is_on = false;

      this.run = function () {
        if (timer <= 0) {
          document.getElementById("myform").style.visibility="visible";
          document.getElementById("timer").innerHTML="GO";
          clearTimeout(timerTimeoutReference);
          timer_is_on = false;
        } else {          
          timer_is_on = true;
          timerTimeoutReference = setTimeout(this.run, 1000);
          document.getElementById("timer").innerHTML=timerCount;
          timer--;
        }
      }

      window.onblur = function counterstops() {
         clearTimeout(timerTimeoutReference);
         timer_is_on = false;
      }

      window.onfocus = function counterstarts() {
         if (!timer_is_on) {
           timer_is_on = true;
           this.run();
         }
       }
  }

  var timerInstance = new SuperCoolTimerClass();
  timerInstance.run(); 
</script>

So a few things on both your code samples:

You are are declaring everything in the global namespace which is a really bad practice. You can see in my suggested solution that everything is scoped to the "SuperCoolTimerClass". This helps prevent naming conflicts.
Your timer_is_on was set as an integer but you were treating it as a boolean (true/false). Even though javascript will interpret 0 as false and 1 as true it is better to just explicitly use true/false in your code as it is much less error prone.