codeigniter javascript计时器设置为localstorage

仅供参考：我还在学习javascript

我有一个计时器，我正试图建立。最终设定为12或24小时，但现在设定为10秒。我试图让它为此计时器设置

localStorage

，并确保它不会在用户离开页面时重新加载和浪费时间。所以基本上，当用户按下按钮时，它开始倒计时，倒计时后它会更新数据库，所以我需要确保当他们启动计时器时，它会一直持续到结束，即使用户离开并在数小时后回来

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  function Timer(duration, display) {
    let timer = duration,
      hours, minutes, seconds;
      
    localStorage.setItem("timr", timer);

    let setIntervalId = setInterval(function() {


      hours = parseInt((timer / 3600) % 24, 10)
      minutes = parseInt((timer / 60) % 60, 10)
      seconds = parseInt(timer % 60, 10);

      

      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;


      display.text(hours + ":" + minutes + ":" + seconds);

      --timer;
      if (timer === -1) {
        clearInterval(setIntervalId);
        // Perform the necessary operation here like triggering event to update the database.
        var nat = window.prompt("Nation Name", "Temp-");



      }
    }, 1000);
  }

  function start() {
    // For testing purpose set the value to 10 seconds.


    var htime = localStorage.getItem("timr");
    
    if (htime < 0 ) {
      let test = 10;
      let twentyFourHours = 24 * 60 * 60;
      const display = $('#remainingTime');
      Timer(test, display);
    } else {
      let temp = htime;
      const display = $('#remainingTime');
      Timer(temp, display);
    }

  }

</script>

<span id="remainingTime"></span>
<br>
<button onclick="start()">Start Nation</button>
<br>
<br/><input type="button" value="Refresh Page" onClick="window.location.reload()">

功能计时器（持续时间、显示）{
让计时器=持续时间，
小时，分钟，秒；
setItem（“timr”，计时器）；
设setIntervalId=setInterval（函数（）{
小时=parseInt（（计时器/3600）%24,10）
分钟=parseInt（（计时器/60）%60，10）
秒=parseInt（计时器%60,10）；
小时=小时<10？“0”+小时：小时；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
显示文本（小时+“：“+分钟+”：“+秒）；
--定时器；
如果（计时器==-1）{
clearInterval（setIntervalId）；
//在此处执行必要的操作，如触发事件以更新数据库。
var nat=window.prompt（“国家名称”，“临时-”）；
}
}, 1000);
}
函数start（）{
//出于测试目的，将该值设置为10秒。
var htime=localStorage.getItem（“timr”）；
如果（htime<0）{
让测试=10；
二十四小时=24*60*60；
常量显示=$（“#剩余时间”）；
定时器（测试、显示）；
}否则{
设temp=htime；
常量显示=$（“#剩余时间”）；
定时器（温度、显示）；
}
}


起始国

执行此操作将返回此错误：

楠：楠：楠

---

这是

当本地存储中没有先前的

timr

项时，它将返回

null

，因此您应该处理该项，而不是先前的值为负值

if (htime == null) {

您还需要在

setInterval

回调中设置localStorage值，并在计时器结束时删除该项

//...
--timer;
localStorage.setItem("timr", timer)
if (timer === -1) {
    clearInterval(setIntervalId);
    // Perform the necessary operation here like triggering event to update the database.
    var nat = window.prompt("Nation Name", "Temp-");
    localStorage.removeItem("timr");
}
//...

---

@abrasaxaz JSFiddle示例对我来说很好。你确定是它生产的吗？或者你编辑了什么？我所做的就是加载你的示例并按下按钮。还是退了。让我把它加载到网站上并测试它是的，所以我把它放在网站上，它正在加载，但是当我重新加载页面时，计时器会暂停并在再次按下按钮时恢复，我如何保持它运行，即使刷新？