Question

我的Quiz Web应用程序有一个计时器，但是每次用户转到下一个问题或刷新页面时，计时器都会重置。

我试图将剩余时间保存到变量中，但是我不知道。我是初学者，对您会有所帮助。

<span id="countdown" class="timer"></span>
<script>
var seconds = 15;
    function secondPassed() {
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    document.getElementById('countdown').innerHTML = minutes + ":" +    remainingSeconds;
    if (seconds == 0) {
        clearInterval(countdownTimer);
        header("location:account.php?q=result&eid=5cb44b236f3b1");
    } else {    
        seconds--;
    }
    }
var countdownTimer = setInterval('secondPassed()', 1000);
</script>

我希望每个页面或用户每次刷新页面时都使用相同的计时器。谢谢您的宝贵时间！

Answer 1

一种解决方案是使用会话变量。您要做的是存储测验开始的时间，并以此为基础进行倒计时。注意，您只需要在首页上设置startTime变量。

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php

if($_SESSION["startTime"] == null)
{
  $_SESSION["startTime"] = time();
}

?>
<script type="text/javascript">
// Timer script
// Get start time of quiz, current time and calculate time remaining
var startTime = "<?php echo $_SESSION["startTime"] ?>"; 

//...Rest of timer script.

</script>
</body>
</html>

Answer 2

要保存数据并与其他页面共享，您需要使用存储。在客户端，我们有Cookie Storage，Local Storage和Session Storage (Client Side)。在服务器端，我们可以使用cookie和Session (server side)。

首先，您需要在最后保存当前剩余的第二个，因此，每次减少第二个时，还需要更新存储。

刷新站点时，首先需要从存储中获取剩余的秒数。如果没有数据（可能是第一次），则需要加载默认时间，否则请加载剩余时间。

看这个，这里我用本地存储。

<div id='countdown'></div>

<script>

    var seconds = localStorage.getItem('remainTime'); //gettting saved time from localstorage

    if(seconds == null || seconds == undefined){
      seconds = 15; //default time
    }

    function secondPassed() {
      var minutes = Math.round((seconds - 30)/60);
      var remainingSeconds = seconds % 60;
      if (remainingSeconds < 10) {
          remainingSeconds = "0" + remainingSeconds; 
      }
      document.getElementById('countdown').innerHTML = minutes + ":" +    remainingSeconds;
      if (seconds == 0) {
          clearInterval(countdownTimer);
          header("location:account.php?q=result&eid=5cb44b236f3b1");
      } else {    
          seconds--;
          localStorage.setItem('remainTime',seconds); //saving time to localstorage
      }
    }


    var countdownTimer = setInterval('secondPassed()', 1000);
</script>

https://codepen.io/anon/pen/oOGRpp

但是最好将其保存在SESSION上，并使用Ajax request进行更新。（出于更安全的目的）

Answer 3

在更新用户数据时，我的安全概念也需要这样一个计时器，现在已经找到了。

这是我的代码：（我的解决方案使用了 codeigniter）

session()->set('can_edit_profile_until', time() + 300); // 5 minutes

我检查的代码：

$session = session();
        
        if( ! $session->has('can_edit_profile_until')) {

            return redirect()->to("/profile/authenticate");
        }

我在 SO 中找到的 JavaScript：

<?php
$remaining_time = session()->get('can_edit_profile_until') - time();
?>
<script>
    var seconds = <?= $remaining_time ?>;
    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('countdown').innerHTML = minutes + ":" +    remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Expired";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('secondPassed()', 1000);
</script>

和显示代码：

<span id="countdown" class="timer"></span>

如果有任何问题，我会帮助他们回答。

刷新页面时，PHP Timer停止重新启动

3 个答案: