各ページのカウントダウンタイマーリセット

Question

私はphpのテストシステムを持っています。このシステムでは、JavaScriptの助けを借りてカウントダウンタイマーを設定しています。ページ上に質問が1つずつ表示され、次の質問が来たときにタイマーが初期位置にリセットされ、ページが更新されます。タイマを減少状態にしたいので、最初から何度も何度もやり直すべきではありません。コードは私がタイマーのために書いた以下のものです。誰かがそれを整理するのを助けてください。

<div id="test_time"> 
    <script language="javascript" type="text/javascript"> 
     var min = 10; 
     var sec = 0; 
     var timer; 
     var timeon = 0; 
     function ActivateTimer() { 
      if (!timeon) { 
       timeon = 1; 
       Timer(); 
      } 
     } 
     function Timer() { 

      var _time = "Time Left : Minutes: " + min + " Seconds: " + sec; 
      document.getElementById("test_time").innerHTML =_time; 
      if (_time != "Time Left : Minutes: 0 Seconds: 0") { 
       if (sec == 0) { 
        min = min - 1; 
        sec = 59; 
       } else { 
        sec = sec - 1; 
       } 
       timer = setTimeout("Timer()", 1000); 
      } 
      else { 
       alert('Test Time Over.. Click Ok to get Results.'); 
      window.location = "result.php"; 

      } 
     } 
    </script> 
    </div> 

Answer 1

まず、カウントダウンタイマーとPHPプロジェクトのようなクイズを使用しているときは、Jqueryの概念を理解する必要があります。

あなたは、システムで次のプロセスに従わなければならない：

1. あなたはAJAXで質問をロードする必要があります。
2. ログインが完了した後、ページの読み込み時にタイマーをロードするdivが必要です。
3. ページが再読み込みされると、jqueryが読み込みを続けるため、タイマーdivを読み込まないでください。
4. ログインが完了してからページが読み込まれてから、ページが読み込まれず、AJAXの助けを借りてページがインラインで変更されていなければ、ページを読み込まなければなりません。

質問がAJAXの上にロードされている場合、質問divだけがロードされ、AJAXとページの他の部分はそのまま残り、タイマーを正しい方法で維持することができます。

あなたは説明で明確になるかもしれません。

:)

Answer 2

まあコーディングハッピー、上記の答えは、問題への適切なアプローチですが、まだそれがあるとして、あなたはそれが仕事をしたい場合は、ローカルストレージ変数を好むことができます。

あなたはクリアするまで、彼らは、彼らが次のページへ運ぶローカルストレージ変数なので、これは

<div id="test_time"> 
<script type="text/javascript">   
     function Timer() { 
      var _time = "Time Left : minutes: " + localStorage.min + " seconds: " + localStorage.sec; 
      document.getElementById("test_time").innerHTML =_time; 
      if (_time != "Time Left : minutes: 0 seconds: 0") { 
       if (localStorage.sec == 0) { 
        localStorage.min = localStorage.min - 1; 
        localStorage.sec = 59; 
       } else { 
        localStorage.sec = localStorage.sec - 1; 
       } 
       timer = setTimeout("Timer()", 1000); 
      } 
      else { 
       alert('Test Time Over.. Click Ok to get Results.'); 
      window.location = "result.php"; 

      } 
     } 
Timer(); 
</script> 
</div> 
<div> 
<a href="next_question_2.php">Next Question 
</div> 

next_question_1.phpとする、これはhome.php

<div id="test_time"> 
<script type="text/javascript">    
    var timer; 
    localStorage.min=10; 
    localStorage.sec=10; 
    var timeon = 0; 

    function ActivateTimer() { 
     if (!timeon) { 
      timeon = 1; 
      Timer(); 
     } 
    } 

    function Timer() { 
     var _time = "Time Left : minutes: " + localStorage.min + " seconds: " + localStorage.sec; 
     document.getElementById("test_time").innerHTML =_time; 
     if (_time != "Time Left : minutes: 0 seconds: 0") { 
      if (localStorage.sec == 0) { 
       localStorage.min = localStorage.min - 1; 
       localStorage.sec = 59; 
      } else { 
       localStorage.sec = localStorage.sec - 1; 
      } 
      timer = setTimeout("Timer()", 1000); 
     } 
     else { 
      alert('Test Time Over.. Click Ok to get Results.'); 
     window.location = "result.php"; 

     } 
    } 
    ActivateTimer(); 
</script> 
</div> 
<div> 
    <a href="next_question_1.php">Next Question</a> 
</div> 

としますクッキーを追加する場合は、必要な数のページを追加することができます。

これはあなたの問題を解決しますが、私はそのようなアプローチをお勧めしません。 AJAXは適切な方法です。 :)