时间戳

首页 > 解决方案 > 刷新后如何使javascript倒计时继续

javascript - 刷新后如何使javascript倒计时继续

问题描述

我想让javascript倒计时在刷新后继续直到结束，即使页面在没有数据库的情况下关闭。我已经进行了一些搜索，但根本无法在此代码上应用任何内容。

有人可以帮我解决这个问题吗？我需要让它工作而不更换整个东西。

let countdown;
const timerDisplay = document.querySelector('.display__time-left');
const endTime = document.querySelector('.display__end-time');
const buttons = document.querySelectorAll('[data-time]');

function timer(seconds) {
  // clear any existing timers
  clearInterval(countdown);

  const now = Date.now();
  const then = now + seconds * 1000;
  displayTimeLeft(seconds);
  displayEndTime(then);
  
  countdown = setInterval(() => {
    const secondsLeft = Math.round((then - Date.now()) / 1000);
    // check if we should stop it!
    if(secondsLeft < 0) {
      document.getElementById('itimer').style.display = 'none'
      document.getElementById('ifree').innerHTML = "done!";
      document.getElementById("ifree").style.fontSize = "3.5rem";
       clearInterval(interval);
      clearInterval(countdown);
      return;
    }
    // display it
    displayTimeLeft(secondsLeft);
  }, 1000);
  document.getElementById('itimer').style.display = 'unset'
  document.getElementById("ifree").style.fontSize = "15px";
}

function displayTimeLeft(seconds){
	const minutes = Math.floor(seconds/60);
	const remainderSeconds = seconds % 60; 
	const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;``
	document.title = display;
	timerDisplay.textContent = display;
}

function displayEndTime(timestamp){
	const end = new Date(timestamp);
	const hour = end.getHours();
	const minutes = end.getMinutes();
	endTime.textContent = `... ${hour}:${minutes}`;
}

function startTimer() {
  const seconds = parseInt(this.dataset.time);
  timer(seconds);
}

buttons.forEach(button => button.addEventListener('click', startTimer));
document.customForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const mins = this.minutes.value;
  console.log(mins);
  timer(mins * 60);
  this.reset();
});
    .body{
  direction: rtl;
  font-family: 'Droid Arabic Kufi', sans-serif;
  color: black;
}
#ifree{
  font-size: 15px;
  color:black;
}
html {
  box-sizing: border-box;
  font-size: 10px;
  color: black;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.display__time-left {
  font-weight: 100;
  font-size: 5rem;
  margin: 12px;
  color:white;
  text-shadow:4px 4px 0 rgba(0,0,0,0.05);
  margin-bottom: -25px;
  color: black;
}

.timer {
  display:flex;
  min-height: 35vh;
  flex-direction:column;
  direction: rtl;
}

.timer__controls {
  display: flex;
}

.timer__controls > * {
  flex:1;
}

.timer__controls form {
  flex:1;
  display:flex;
}

.timer__controls input {
  flex:1;
  border:0;
  padding:2rem;
}

.timer__button {
  background:none;
  border:0;
  cursor: pointer;
  color:black;
  font-size: 2.5vh;
  text-transform: uppercase;
  background:rgba(0,0,0,0.1);
  border-bottom:3px solid rgba(0,0,0,0.2);
  border-right:1px solid rgba(0,0,0,0.2);
  padding:1rem;
  font-family: 'Droid Arabic Kufi', sans-serif;
}
.timer__leave {
  border:0;
  cursor: pointer;
  color:black;
  font-size: 2.5vh;
  text-transform: uppercase;
  background:rgba(0,0,0,0.1);
  border-bottom:3px solid rgba(0,0,0,0.2);
  border-right:1px solid rgba(0,0,0,0.2);
  padding:1rem;
  font-family: 'Droid Arabic Kufi', sans-serif;
}
.timer__button:hover,
.timer__button:focus {
  background:rgba(0,0,0,0.2);
  outline:0;
}

.display {
  flex:1;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 105px;
}

.display__end-time {
  font-size: 3vh;
  color:white;
  font-family: 'Droid Arabic Kufi', sans-serif;
  margin: 12px;
}
@media screen and (min-width: 1200px) {
  timer__button {
     font-size: 1px;
  }
}
  <body>
          <div class="timer">
    <div class="timer__controls">
      <button data-time="1800" class="timer__button">30</button>
      <button data-time="3600" class="timer__button">60</button>
      <button data-time="5400" class="timer__button">90</button>
      <button data-time="7200" class="timer__button">120</button>
      <button data-time="14400" class="timer__button">240</button>
      <button class="timer__leave" id="timer__leave">OFF</button>
      <button data-time="0" class="timer__button">X</button>
    </div>
    <div class="display">
      <h1 class="display__time-left" id="itimer"></h1>
      <p class="display__end-time" id="ifree"></p>
    </div>
  </body>

标签： javascriptphpjqueryhtmlcss

解决方案

更新定时器功能

function timer(seconds) {
  // clear any existing timers
  clearInterval(countdown);

  const now = Date.now();
  const then = now + seconds * 1000;
  displayTimeLeft(seconds);
  displayEndTime(then);

  countdown = setInterval(() => {
    const secondsLeft = Math.round((then - Date.now()) / 1000);
    // check if we should stop it!
    if(secondsLeft < 0) {
      document.getElementById('itimer').style.display = 'none'
      document.getElementById('ifree').innerHTML = "متاح الآن!";
      document.getElementById("ifree").style.fontSize = "3.5rem";
       clearInterval(interval);
      clearInterval(countdown);
      localStorage.removeItem("timeLeft")
      return;
    }
    // display it
    localStorage.timeLeft=secondsLeft;
    displayTimeLeft(secondsLeft);
  }, 1000);
  document.getElementById('itimer').style.display = 'unset'
  document.getElementById("ifree").style.fontSize = "15px";
}

然后添加以下条件。

if(localStorage.timeLeft){
timer(localStorage.timeLeft);
}

推荐阅读