2016-10-23 2 views
0

Ich möchte hinzufügen window.onblur und window.onfocus zu diesem bestehenden Counter-Skript, das funktioniert. Ich möchte den Timer onblur stoppen und den Timer erneut im Fokus starten.onblur und onfocus Ereignisse in bestehende Counter-Skript

Ich kann es nicht funktionieren lassen und ich mache nicht wie es geht. Ich habe verschiedene Möglichkeiten ausprobiert. Aber ich bin ein Anfänger. Bitte helfen Sie, wenn Sie können. Hier ist der Arbeitscode, der onblur und onfocus benötigt:

$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); 
     } 
    } 

Hier ist der andere Zähler-Code, der funktioniert, aber ich brauche die anderen Zähler Skript mit Hilfe von diesen zu machen:

<!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> 
+2

Willkommen bei Stack Overflow! Du kannst zuerst die [Tour] machen und eine gute Frage erfahren. Das erleichtert es uns, Ihnen zu helfen. Wir sind kein Kodierungsdienst, also müssen Sie zuerst onblur und onfocus programmieren und wenn Sie Probleme haben, können wir Ihnen dabei helfen. – Katie

+0

Ich habe deine zwei Beiträge zu einem zusammengefasst. Sie sollten die Dinge nicht als Antwort auf Ihre eigene Frage veröffentlichen, es sei denn, es ist wirklich eine Lösung für das Problem, das Sie haben. Es ist viel einfacher für andere, wenn alle Informationen in einem einzigen Post sind. – Adrian

Antwort

0
<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 ein paar Dinge auf beiden Codebeispiele:

  • Du alles im globalen Namespace deklarieren, die eine wirklich schlechte pra ist ctice. Sie können in meiner vorgeschlagenen Lösung sehen, dass alles auf die "SuperCoolTimerClass" beschränkt ist. Dies hilft Namenskonflikte zu vermeiden.
  • Ihr timer_is_on wurde als Integer festgelegt, aber Sie haben es als boolesch (wahr/falsch) behandelt. Auch wenn JavaScript 0 als falsch und 1 als wahr interpretiert, ist es besser, in Ihrem Code explizit "true/false" zu verwenden, da es weniger fehleranfällig ist.
Verwandte Themen