Question

每次刷新页面时，倒数计时器都会重新加载。我发现我需要使用本地存储（我猜），但我怎么能在这个javascript倒计时代码中实现它？这是我的JS小提琴 https://jsfiddle.net/BrsJsk/srv3ywnL/

＆＃13;

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 59 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

＆＃13;

   <div id="clockdiv">
      <p1 class="dayss"><span class="num days">34</span> days</p1>
      <p1 class="hourss"><span class="num hours">16</span> hours</p1>
      <p1 class="secondss"><span class="num seconds">1</span> secs</p1>
      <p1 class="minutess"><span class="num minutes">19</span> mins</p1>
    </div>

＆＃13;

Answer 1

您需要保持一个静态时刻，将倒计时到。每次在您的代码中，您都会获得当前日期，因此它会在加载时重置。

<强>的jsfiddle： https://jsfiddle.net/xrwm51sg/

关键线是：

var deadline = new Date("Oct 2, 2020 12:30:00").getTime();

那么你现在减去现在的当前时间。

var t = endtime - new Date().getTime();

完整的工作代码：

function getTimeRemaining(endtime) {

  var t = endtime - new Date().getTime();
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date("Oct 2, 2020 12:30:00").getTime();
initializeClock('clockdiv', deadline);

Answer 2

如果您希望它倒数到特定时间，您可以查看此页面：https://www.w3schools.com/howto/howto_js_countdown.asp

Answer 3

您可以使用本地存储执行此操作，以下是使用localstorage

的代码

<div id="clockdiv">
  <p1 class="dayss"><span class="num days">34</span> days</p1>
  <p1 class="hourss"><span class="num hours">16</span> hours</p1>
  <p1 class="secondss"><span class="num seconds">1</span> secs</p1>
  <p1 class="minutess"><span class="num minutes">19</span> mins</p1>
</div>
<script>

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);
    //var value = parseInt(endtime);
    localStorage.setItem("counter", endtime);
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

  if(localStorage.getItem("counter")){
    var deadline = localStorage.getItem("counter");
    }else{
      var deadline = new Date(Date.parse(new Date()) + 59 * 24 * 60 * 60 * 1000);
    }

initializeClock('clockdiv', deadline);
</script>

这是小提琴https://jsfiddle.net/abhaybhosale/3eg99sxa/1/

倒计时重新加载刷新

3 个答案: