2016-10-23 8 views
0

window.onblurwindow.onfocusをこの既存のカウンタスクリプトに追加したいと思います。私はタイマーonblurを停止し、再びonfocusタイマーを開始したい。onblurとonfocusイベントを既存のカウンタスクリプト

私はそれを動作させることはできません。私はそれを行う方法をしません。私は様々な可能性を試しました。しかし、私は初心者です。可能であればお手伝いください。ここでは、作業のonblur必要なコードと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); 
     } 
    } 

が働く他のカウンタコードでは、私はこれらの助けを借りて、他のカウンタスクリプトを作成する必要があります。

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

スタックオーバーフローへようこそ!最初に[ツアー]をして、良い質問を覚えることができます。そうすれば、私たちがあなたを助けやすくなります。私たちはコーディングサービスではないので、最初にonblurとonfocusを試してみる必要があります。問題がある場合は、それを手助けすることができます。 – Katie

+0

2つの投稿を1つにまとめました。本当にあなたが持っている問題の解決策でない限り、あなた自身の質問に対する答えとして物事を投稿すべきではありません。すべての情報が単一の投稿内にあれば、他の人にとってははるかに簡単です。 – Adrian

答えて

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> 
両方のあなたのコードサンプルで

だから、いくつかのこと:

  • あなたは本当に悪いPRAはグローバル名前空間のすべてを宣言しているされていますctice。私の提案する解決策では、すべてが「SuperCoolTimerClass」にスコープされていることがわかります。これにより、名前の競合を防ぐことができます。
  • timer_is_onは整数として設定されていましたが、ブール値(true/false)として扱っていました。 javascriptは0をfalse、1をtrueと解釈しますが、コード内でtrue/falseを明示的に使用する方がエラーが発生しにくいので、
関連する問題