javascript - 倒数计时器在 10 分钟后消失并且不会重置计数器

Question

我正在研究 10 分钟的倒数计时器。我想知道如何让计数器在时间到时停止显示，或者即使在刷新页面后仍然从剩余的时间开始计数。

// 10 minutes from now
var time_in_minutes = 10;
var current_time = Date.parse(new Date());
var deadline = new Date(current_time + time_in_minutes * 60 * 1000);


function time_remaining(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 run_clock(id, endtime) {
  var clock = document.getElementById(id);

  function update_clock() {
    var t = time_remaining(endtime);
    clock.innerHTML = "<span style='color: #E89E88; font-weight: bold;'>DÉSE PRISA! </span>" + 'Use el código de descuento' + "<span style='font-weight: bold; color:white;'>'DESCUENTO5'</span>" + ' en los próximos ' + t.minutes + ' m ' + t.seconds + ' s ' + ', y ahorre un extra 5% en su pedido!';
    if (t.total == 0) {
      clearInterval(timeinterval);
    }
  }

  update_clock(); // run function once at first to avoid delay
  var timeinterval = setInterval(update_clock, 1000);
}
run_clock('clockdiv', deadline);

#clockdiv {
  background: #bfbfbf;
  color: white;
  padding: 6px;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 16px;
}

<div id="clockdiv"></div>

Answer 1

试试这个代码，你可以设置倒计时的日期，如果你重新加载页面或在新窗口中打开它

    <!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>