Question

如何刷新和关闭浏览器时我的计时器不会重置？

我是博客=博客

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

这是我的代码

以下是exmeple：https://jsfiddle.net/okL8z9z0/

linkforyouTimermylinkhiReady

＆＃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);
      $(this).parent().next().fadeTo(300, 0.3);
      $.post("", {
        fid: $(this).data('fid')
      });
    }
  });







  $(".timer").click(function() {
    if (confirm("Reset timer?")) {
      $(this).data('secleft', 0);
      $.post("", {
        fid: $(this).closest("tr").find('a:eq(0)').data('fid'),
        reset: 1
      });
    }
  });






  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;

<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 data-payout="900">
      <TD>
        <A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">mylink</A>
      </TD>
      <TD>hi</TD>
      <TD>
        <SPAN CLASS="timer" data-minutes="1" data-secleft="0">Ready</SPAN>
      </TD>
    </TR>
  </TABLE>
</DIV>

＆＃13;

Answer 1

当标签或浏览器刷新或关闭时，JavaScript中的每个数据都会被删除 - 这是正常的。如果您需要存储计时器，可以使用cookie并在timer()函数中保存有关计时器的数据。例如：

function timer() {
curtime = Math.round($.now() / 1000);
document.cookie="cookie_name="+curtime; // save curtime variable to cookie_name cookie
$(".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();

如果您想要读取具有最后一个时间值的cookie，可以通过获取document.cookie值并拆分（或解析）它来检索您的值。

Here您有一些关于Cookie API和使用示例的信息（还有用于Cookie管理的现成功能）。

Answer 2

当页面刷新数据消失时，我们需要将小时，分钟和秒存储在某处，最好和最简单的方法是localStorage。所以在计时器启动的第一次然后存储小时，分钟和秒后，从那里得到hh，mm，ss所以当它的refresh.gd运气时它不会消失计时器

Answer 3

这是不可能的，因为如果您刷新页面，浏览器会重新运行您的javascript代码。您可以做的最好的事情是在页面重新加载之前将当前时间存储在cookie，本地存储或某些后端服务器中，当页面重新加载时，您可以从当前时间开始计时。

浏览器刷新和关闭时计时器重置

3 个答案: