倒计时器在每页重置

i have an exam system in php on which i have set a countdown timer with the help of javascript. the questions are displayed one by one on the page and the timer reset to the initial position when the next question comes also the page refreshes itself. I want to set the timer on the decreasing state so is should not start again and again to the initial time. the code is the following i have written for the timer. please anyone help me to sort it out.

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

First you must understand the concept of Jquery while working with the countdown timer and Quiz like PHP project.

You have to follow the following process in the System:

1. You have to load the question in AJAX.
2. You must have the div which loads the timer at the page load after the login is being done.
3. The timer div must not be loaded since the jquery will be keep loading if the page reloads again.
4. Only once the page has to be loaded that is after the login is done and after that the page should not be loaded and it has to changed inly with the help of AJAX.

Since if the question is loaded over the AJAX only the question div alone will be loaded and that to with AJAX and all the other part of the page will remain the same and you can maintain the timer in a correct manner.

Hope so you might be clear with the Explanations.

Happy Coding :)

Well , the above answer is the proper approach to the problem but still if you want it to work as it is, then you can prefer local Storage Variables.

Let this be 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>

Let this be next_question_1.php

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

Since they are local Storage variables they carry on to next pages until you clear the cookies, you may add as many pages you want.

This solves your problem but, I don't recommend such approach. AJAX is the proper way to do it. :)