Question

我正在进行在线考试。其中检查持续时间将通过mysql获取（以分钟为单位）。我想在页面顶部显示倒计时时间。

目前我正在使用

http://javascript.internet.com/time-date/countdown-timer.html

但主要问题是......当每次出现新问题时......页面都会刷新并且...从开始时重新开始。

请帮帮我，主要问题在哪里？

或任何其他示例，如果你想建议？

由于

Answer 1

在运行测试之前，您需要在服务器端计算确切的测试结束时间并将其保存到会话中：

<?php
if (empty($_SESSION['test_will_end_by'])) {
    $_SESSION['test_will_end_by'] = time() + $test_duration_in_seconds;
}
?>

然后，如果您从HTML提供客户端脚本：

Time left:
<span class="timer" data-end="<?php 
    echo date(DateTime::RFC1123, $_SESSION['test_will_end_by']); 
?>"></span>

将此代码添加到您的jQuery DOM-ready处理程序中以启动页面上的所有计时器：

$('.timer').each(function() {
    var target = new Date($(this).data('end')), update, $this = $(this);
    (update = function () {
        var now = new Date();
        $this.text((new Date(target - now)).toUTCString().split(' ')[4]);
        if (Math.floor((target - now)/1000) == 0) return; // timer stops
        setTimeout(update, 1000);
    })();
});

Answer 2

每次刷新页面时，JavaScript代码都会再次运行，因此计时器将被重置。要解决此问题，请在不刷新页面的情况下获取内容，即：Ajax。

Answer 3

您可以使用表单 submit 或页面 beforeunload 事件将当前值存储在cookie中。然后当加载新页面时，获取剩余时间并继续倒计时。这也允许一些网络延迟。

请注意，用户可能能够访问和修改cookie的值。

Answer 4

将问题开始时间存储在会话中，当页面刷新时，从服务器获取会话开始时间差异并在网页中显示它们。您可以在不使用AJAX的情况下从客户端javascript代码执行增量部分。

倒数计时器-php + mysql + js

4 个答案: