java脚本倒计时器在页面刷新时重置

时间:2017-08-30 09:39:46

标签: javascript html timer countdown

我正在尝试为我的网站实施倒计时,但它会在每次刷新页面时重置,我不知道如何解决这个问题,你们可以帮我解决这个问题吗?(i used this)...



var timer;
var compareDate = new Date();
compareDate.setDate(compareDate.getDate() + 16); //incresed by to date + (16 days)

timer = setInterval(function() {
  timeBetweenDates(compareDate);
}, 1000);

function timeBetweenDates(toDate) {
  var dateEntered = toDate;
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);

  } else {

    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
}
&#13;
body {
  background: #f5f5f5;
}
#timer {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #999;
  letter-spacing: -1px;
}
#timer span {
  font-size: 60px;
  color: #333;
  margin: 0 3px 0 15px;
}
#timer span:first-child {
  margin-left: 0;
}
  
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="timer">
  <span id="days"></span>days
  <span id="hours"></span>hours
  <span id="minutes"></span>minutes
  <span id="seconds"></span>seconds
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

由于您的倒计时会计算页面开始的结束时间,因此每次刷新页面时倒计时都会重新开始正常/预期。在您的情况下,您正在做的是在当前日期添加16天。

如果你想让coutdown不改变,你应该添加一个固定日期,如下所示:

var compareDate = new Date(yyyy,MM,dd,hh,mm,ss);

yyyyMM等值更改为年,月,日,小时,分钟和秒,如下例所示:

var compareDate = new Date(2017,09,10,12,00,00);

N.B。:此解决方案不依赖于客户端。它将为连接到页面的每个用户显示完全相同的倒计时。

答案 1 :(得分:0)

如果要使用localStorage,可能会执行以下操作。 它基本上会在第一次运行时存储compareDate ..

PS。由于Snippet中的安全属性,这在此处不起作用,但应该在您的网站上有效。

var timer;

var savedDate = localStorage.getItem('savedDate');
var compareDate = new Date();
if (savedDate)  {
  compareDate = new Date(savedDate);
} else { 
  compareDate.setDate(compareDate.getDate() + 16); //incresed by to date + (16 days)
  localStorage.setItem('savedDate', compareDate);
}

//...rest of code