Таймер обратного отсчета, который исчезает через 10 минут и не сбрасывает счетчик

Question

Я работаю над таймером обратного отсчета 10 минут. Мне было интересно, как можно заставить счетчик перестать показываться, когда время истекло, или продолжать отсчитывать от количества времени, которое осталось, даже после того, как вы обновите sh страницу.

// 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>

Answer 2

Я произвел рефакторинг вашего кода и использовал localStorage для хранения таймера. Пожалуйста, следуйте этому примеру:

HTML:

Лучше отделить часть HTML, чтобы избежать ее повторного создания каждую секунду при использовании setInterval

<div class="clockdiv">
  <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
  <span id="event_timer">loading.. </span>, y ahorre un extra 5% en su pedido!
</div>

JavaScript:

// Span element that will hold the timer
const clock = document.getElementById("event_timer");
// Duration in minutes
const duration = 10;

function resetStartTime() {
  const startTime = Date.now();
  const eventTime = duration * 60 * 1000;
  const eventDuration = new Date(startTime + eventTime);
  // Save to localStorage
  localStorage.setItem("startTime", eventDuration);
  return eventDuration;
}

document.addEventListener("DOMContentLoaded", () => {
  // Get the stored time
  const startTime = new Date(
    localStorage.getItem("startTime") || resetStartTime()
  );
  // Starting the timer
  timeInterval = setInterval(() => {
    // Stored value - current time
    const timer = startTime.getTime() - Date.now();

    // Uncomment these lines if you want to use 'days' and 'hours'
    // const days = Math.floor(timer / (1000 * 60 * 60 * 24))
    // const hours = Math.floor((timer % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    const minutes = Math.floor((timer % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timer % (1000 * 60)) / 1000);

    // Add to DOM
    clock.innerText = minutes + " Minutes, " + seconds + " Seconds ";

    // Clear and reset when done
    if (timer <= 0) {
      clock.innerText = "EXPIRADO!";
      localStorage.removeItem("startTime");
      clearInterval(timeInterval);
    }
  }, 1000);
});

---

Вот пример codePen (только 1 минута), поскольку здесь не поддерживается localStorage.

Answer 3

Попробуйте добавить прослушиватель событий , чтобы определить, когда таймер достигнет 0, и использовать свойство локального хранилища окна , чтобы отслеживать прошедшее время, даже если браузер обновляется.