Question

我有一个PHP的考试系统，我已经在javascript的帮助下设置了倒数计时器。问题在页面上逐一显示，当下一个问题出现时，计时器重置到初始位置，页面也会自动刷新。我想将计时器设置为递减状态，因此不应该一次又一次地启动到初始时间。代码是我为计时器编写的以下代码。请任何人帮我解决。

<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的概念。

您必须在系统中执行以下过程：

您必须在 AJAX 。
您必须拥有在登录完成后在页面加载时加载计时器的div。
不能加载计时器div，因为如果页面重新加载，jquery将继续加载。
只有在登录完成后才需要加载页面，之后不应加载页面，并且必须在AJAX的帮助下进行更改。

因为如果问题是通过AJAX加载的，那么只会加载问题div，而且对于AJAX和页面的所有其他部分将保持不变，你可以正确地维护计时器。

希望您对解释有所了解。

快乐编码：）

Answer 2

嗯，上面的答案是解决问题的正确方法，但如果你希望它按原样工作，那么你可以选择本地存储变量。

让这成为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>

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

由于它们是本地存储变量，因此它们会一直存储到下一页，直到您清除cookie，您可以添加所需的页数。

这解决了您的问题但是，我不推荐这样的方法。 AJAX是实现它的正确方法。：）

倒计时器在每页重置

2 个答案: