Question

我正在尝试在刷新页面后继续倒计时/计时器而不从头重新开始。我使用过JavaScript但重新加载页面时会重置。

if (this.readyState == 4 && this.status == 200) {
   // Typical action to be performed when the document is ready:
var respoTxt = xhttp.responseText;
var myObj = JSON.parse(respoTxt); 
document.getElementById("demo").innerHTML = '<table><tr><thead>' + 
myObj["dataset"]["column_names"][5] + '</thead><thead>' + myObj["dataset"]
["column_names"][6] + '</thead></tr>';
myObj["dataset"]["data"].forEach(function(p, i) {
//Below is 1st code version:
// var tr = document.createElement("tr");
// document.getElementById("demo").appendChild(tr);
// var td1 = document.createElement("td");
// tr.appendChild(td1);
// var td2 = document.createElement("td");
// tr.appendChild(td2);
// td1.innerHTML = myObj["dataset"]["data"][i][5];
// td2.innerHTML = myObj["dataset"]["data"][i][6];

document.getElementById("demo").innerHTML += '<tr>';
document.getElementById("demo").innerHTML += '<td>' + myObj["dataset"]
["data"][i][5] + '</td>';
document.getElementById("demo").innerHTML += '<td>' + myObj["dataset"]
["data"][i][6] + '</td>';
document.getElementById("demo").innerHTML += '</tr>';

//Here's the 3rd code version:
// document.getElementById("demo").innerHTML += '<tr><td>' + 
myObj["dataset"]["data"][i][5] + '</td><td>' + myObj["dataset"]["data"][i]
[6] + '</td></tr>';
});
document.getElementById("demo").innerHTML += '</table>';
}

计时器一直持续到用户点击提交，但如果用户重新加载页面，是否可以使用PHP或JavaScript自动恢复？

Answer 1

只需使用浏览器Window.localStorage（或者如果更适合，则使用sessionStorage）。

<div class="countdown"></div>
<button style="display:none">FINISH!!!</button>
<script>
    $(document).ready(function() {
        var timer2 = localStorage.getItem('timer');
        if(timer2 === null) timer2 = "1:30";
        $('.countdown').html(timer2);

        var interval = setInterval(function() {
            var timer = timer2.split(':');
            var minutes = parseInt(timer[0], 10);
            var seconds = parseInt(timer[1], 10);
            --seconds;
            minutes = (seconds < 0) ? --minutes : minutes;
            if (minutes < 0){
                clearInterval(interval);
                localStorage.removeItem('timer');
                $('button').show();
            }else{
                seconds = (seconds < 0) ? 59 : seconds;
                seconds = (seconds < 10) ? '0' + seconds : seconds;
                $('.countdown').html(minutes + ':' + seconds);
                timer2 = minutes + ':' + seconds;
                localStorage.setItem('timer',timer2);
            }
        }, 1000);
    });
</script>

Answer 2

我能想到设置剩余时间的$ _SESSION变量的唯一方法是每隔一秒左右在你的javascript中使用一个ajax调用，它会在文件路径中调用带有get变量的php脚本。这个php脚本会设置一个会话变量，你的计时器页面会检查是否设置了$ _SESSION ['timeLeft']，并为timeleft回显一个js变量，如果没有设置echo out 0。

分开php：

<?php
  if(isset($_GET['timeLeft'])){
    $_SESSION['timeLeft'] = $_GET['timeLeft'];
  }
?>

Inside timer JS（使用JQuery）：

$.ajax({url: "somePath/updateTimeLeft.php?timeLeft=1234"});

当你加载页面时，在你的php中

if(isset($_SESSION['timeLeft'])){
  echo 'var timeLeft = ' . $_SESSION['timeLeft'] . ';';
  $_SESSION['timeLeft'] = undefined;
}else{
  echo 'var timeLeft = 0;';
}

设置倒计时/定时器以在重置后继续或在刷新页面后不重置

2 个答案: