Question

刷新浏览器后如何才能重置计时器？

我使用<table width="100%" cellpadding="5" cellspacing="5" > <p><strong>Search Results:</strong></p> <tr> <td></td> <td><strong>First Name</strong></td> <td><strong>Last Name</strong></td> <td><strong>Job Role</strong></td> <td><strong>Skill(s)</strong></td> </tr> <?php if(isset($_POST['search'])){ if(@mysqli_num_rows($search_query)!=0){ do{ ?> <tr> <td> <form action="AddUserToProject.php?id=<?php echo urlencode($Project); ?>" method="post" id="addform"> <input type="submit" name="adduser" value="<?php echo htmlspecialchars($search_rs['UserID']); ?>"/> </form> </td> <td><?php echo $search_rs['Fname']; ?></td> <td><?php echo $search_rs['Lname']; ?></td> <td><?php echo $search_rs['JobRole']; ?></td> <td><?php echo $search_rs['Description']; ?></td> </tr> <?php } while ($search_rs=mysqli_fetch_assoc($search_query)); } else { echo "No results found"; }} if(isset($_POST['adduser'])) { $AddUserID = $search_rs['UserID']; $AddProjectID = $Project; $sql = $con->query("INSERT INTO userprojects (UserID, ProjectID) VALUES ('$AddUserID', '$AddProjectID')") or die(mysqli_error($con)); } ?> </table>

我的问题是当我按下刷新时，计时器重新启动到原来的时间。单击刷新按钮或关闭浏览器时如何才能使计时器不重置？

以下是示例1：http://topbitcoinfaucet2.blogspot.com

请举个例子。对不起，我是javascript的新手。

＆＃13;

blog=blogger

＆＃13;

function secondsTimeSpanToHMS(s) {
 var h = Math.floor(s/3600);
 s -= h*3600;
 var m = Math.floor(s/60);
 s -= m*60;
 return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s);
}
$(function() {

 $(".flink").click(function() {
  var timer = $(this).parent().parent().find('.timer');
  if(timer.data('secleft') <= 0) {
   timer.data('secleft', timer.data('minutes') * 60 + 20);
 $(this).parent().fadeTo(300,0.3);
 
  }
 });
 var lasttime = Math.round($.now() / 1000);
 var curtime = Math.round($.now() / 1000);
 function timer(){
  curtime = Math.round($.now() / 1000);
  $(".timer").each(function(){
   if($(this).data('secleft') > 0) {
    $(this).data('secleft', $(this).data('secleft') - (curtime - lasttime));
    $(this).text(secondsTimeSpanToHMS($(this).data('secleft')));
   } else {
    if($(this).text()!=$("#language").data('ready')) {
     $(this).text($("#language").data('ready'));
     $(this).parent().prev().fadeTo(300,1);
     $(this).parent().prev().prev().fadeTo(300,1);
    }
   }
  });
  lasttime = curtime;
  setTimeout(timer, 1000);
 }
 timer();


});

＆＃13;

Answer 1

您可以使用Javascript Local Storage执行此操作。这是我在此处发布的另一个答案粘贴的：Time an event using javascript/jquery

您可以使用会话存储来完成此任务。 Javascript存储数据在页面和刷新之间保持不变。这是一些信息： http://www.w3schools.com/html/html5_webstorage.asp

// SET THIS ON THE FIRST VISIT. CHECK IF ALREADY SET.
if(typeOf(localStorage.getItem('timer')) == 'undefined'){
  localStorage.setItem("timer", "0");
}

setInterval(function(){ 
  //  ADD 1 SECOND TO SESSION TIMER
  localStorage.setItem("timer", localStorage.getItem("timer")++);

  if(localStorage.getItem("timer") == 30){
    // TRIGGER YOUR EVENT ON 30 SECONDS
  }
}, 1000);

Answer 2

我猜最好的解决方案是在服务器端保存定时器的值。

如果你想在Javascript中保存，可以将定时器的值保存到cookie中。

您可以阅读Cookie

var x = document.cookie;

并写入cookie

document.cookie="username=John Doe";

看看这里： http://www.w3schools.com/js/js_cookies.asp

希望有所帮助。

干杯

Answer 3

您可以尝试在页面刷新之前将计时器保存在本地存储中。

$(function() {

    var timer = window.localStorage.getItem('timer') || 0;

    // some stuff with your timer

    $(window).on('beforeunload',function(){
        window.localStorage.setItem('timer', timer)
    });
});

Answer 4

您需要保存点击链接的时间或倒计时的时间。请参阅演示：https://jsfiddle.net/flocsy/moecr2xn/2/

＆＃13;

function secondsTimeSpanToHMS(s) {
 var h = Math.floor(s/3600);
 s -= h*3600;
 var m = Math.floor(s/60);
 s -= m*60;
 return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s);
}
$(function() {
 $(".flink").click(function() {
  var timer = $(this).parent().parent().find('.timer');
  var id = timer.data('id');
  if(timer.data('secleft') <= 0) {
   timer.data('secleft', timer.data('minutes') * 60 + 20);
   $(this).parent().fadeTo(300,0.3);
  }
  // here you need to calculate the timestamp of the time you count down to and save it.
  // note that you'll have to save it per link!
  var now = (new Date()).getTime();
  var ts = now + (parseInt(timer.data('minutes')) * 60 + 20)*1000;
console.log(ts, now, ts-now);
  localStorage.setItem('timestamp_' + id, ts);
 });
 var lasttime = Math.round($.now() / 1000);
 var curtime = Math.round($.now() / 1000);
 function timer(){
  curtime = Math.round($.now() / 1000);
  $(".timer").each(function(){
   if($(this).data('secleft') > 0) {
$(this).data('secleft', $(this).data('secleft') - (curtime - lasttime));
$(this).text(secondsTimeSpanToHMS($(this).data('secleft')));
   } else {
if($(this).text()!=$("#language").data('ready')) {
 $(this).text($("#language").data('ready'));
 $(this).parent().prev().fadeTo(300,1);
 $(this).parent().prev().prev().fadeTo(300,1);
}
   }
  });
  lasttime = curtime;
  setTimeout(timer, 1000);
 }

  // when loading the page check if for any .flink we already
  // saved a timer before the refresh:
  $(".timer").each(function(){
var timer = $(this);
var id = timer.data('id');
var ts = localStorage.getItem('timestamp_' + id);
var now = (new Date()).getTime();
console.log(id, ts, now, ts-now);
if (ts && ts > now) {
   // if found, we set the secleft of the timer by calculating
   // how much time is 'till the countdown
   var secleft = Math.round((ts - now)/1000);
console.log("secleft:",secleft);
   timer.data('secleft', secleft);
}
  });
  timer();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<DIV CLASS="box" STYLE="width:100%">
 <TABLE STYLE="width:100%">
  <TR><TH STYLE="width:220px">link</TH><TH STYLE="width:140px">foryou</TH><TH STYLE="width:140px">Timer</TH><TH/></TR>
  <TR><TD><A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">mylink</A></TD><TD>hi</TD><TD><SPAN CLASS="timer" data-id="id1" data-minutes="1" data-secleft="0">Ready</SPAN></TD></TR>
  <TR><TD><A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">mylink</A></TD><TD>hi</TD><TD><SPAN CLASS="timer" data-id="id2" data-minutes="1" data-secleft="0">Ready</SPAN></TD></TR>
</TABLE></DIV>

＆＃13;

一般情况下，我建议不要依赖自上次调用计时器以来经过的时间，而是计算剩余的时间。

刷新浏览器时如何防止我的计时器重置？

4 个答案: