使用javascript在浏览器中每小时弹出一条消息

我不熟悉JavaScript，正在尝试构建一个简单的web应用程序。
我的要求是，在我启动计时器后，我需要应用程序弹出一条消息

编辑：请注意，用户可能没有查看此网页，如果是，则必须显示此网页，以便用户注意到它，类似于在windows中将其置于最前面

我提出这个问题的原因是，这非常简单，可以在一些框架中实现。我在谷歌上搜索发现有很多定时器的实现，但没有显示弹出消息。我不需要样本代码，但如果你能给出一些方向，比如从哪里开始，那就太好了

我称之为一个应用程序，因为我们的思想过程是在将来改进这个应用程序，提供一个窗口，允许用户编写一些东西，而不仅仅是显示弹出消息

我怎样才能做到这一点？
我可以使用哪些框架？

---

你能按照我的方法给我一个简单的应用程序吗？

你需要一个函数，用setInterval每小时调用一次

setInterval(yourFunction, 1000 * 60 * 60);

在你的功能中，你可以自己构建一个pop。。

---

或者您可以简单地调用一个警报（）…

您可以像这样单击来启动和停止间隔

$(function() {
    var timer = null, 
        interval = 1000 * 60 * 60;

    $("#start").click(function() {
      if (timer !== null) return;
      timer = setInterval(function () {
          alert("okay");
      }, interval); 
    });

    $("#stop").click(function() {
      clearInterval(timer);
      timer = null
    });
});

---

如果您有localStorage，您可以创建一个简单的持久性JS计时器：

//  ensure u have localStorage (can be done better).
if (localStorage)
{
    //  get the localStorage variable.
    let timerValue = localStorage.getItem('timerValue');

  //  if it's not set yet, set it.
  if (!timerValue)
  {
    timerValue = new Date().toString();
    localStorage.setItem('timerValue', timerValue);
  }

  //  parse string date and get difference between now - old time in milliseconds.
  let diff = new Date().getTime() - new Date(timerValue).getTime();

  //  compare difference and check if it matches 1 hour (1000ms * 60s * 60m)
  if (diff >= 1000 * 60 * 60)
  {
    //  reset timer immediately.
    localStorage.setItem('timerValue', new Date().toString());

    // do something..
  }
}

希望能有帮助

编辑：如果你想让计时器实时更新，你可以像前面提到的那样使用setInterval

setInterval(yourFunction, 1000 * 60 * 60);

编辑2：我得到了一个like，所以我改进了我的代码：

HTML:

<div id="timer"></div>

const AmountOfTimeToCheckInMs = 1000 * 60 * 60;
const PollingSpeedInMs        = 1000;

class PersistentTimer
{
  constructor()
  {
    //  ensure u have localStorage (can be done better).
    if (!localStorage)
    {
      console.log('localStorage not supported!');
      return;
    }

    //  get the timer element.
    this.timerElement = document.querySelector('#timer');

    //  get the localStorage variable.
    this.timerValue = localStorage.getItem('timerValue');

    //  if it's not set yet, set it.
    if (!this.timerValue)
    {
      this.resetTimer();
    }

    this.updateTimer();
    setInterval(() => this.triggerEverySecond(), PollingSpeedInMs);
  }

  triggerEverySecond()
  {
    this.updateTimer();

    //  compare difference and check if it matches 1 hour (1000ms * 60s * 60m)
    if (this.getTimeDifference() >= AmountOfTimeToCheckInMs)
    {
      //  reset timer immediately.
      this.resetTimer();

      // do something..
    }
  }

  resetTimer()
  {
    this.timerValue = new Date().toString();

    localStorage.setItem('timerValue', this.timerValue);
  }

  getTimeDifference()
  {
    //  parse string date and get difference between now - old time in milliseconds.
    return new Date().getTime() - new Date(this.timerValue).getTime();
  }

  updateTimer()
  {
    let calculatedDiffDate = new Date()
    calculatedDiffDate.setTime(AmountOfTimeToCheckInMs - this.getTimeDifference());

    this.timerElement.innerHTML = calculatedDiffDate.getMinutes() + 'm ' + calculatedDiffDate.getSeconds() + 's';
  }
}

new PersistentTimer();

---

Fiddle:

您需要使用js函数setTimeout（yourFunc，timeDelay），yourFunc应该更改css属性或css类，显示：无，显示：块（或其他）。2秒后显示消息

const popUp=document.getElementById（'popUp'）；
设置超时（（）=>{
popUp.style.display='flex'；
}, 2000);
#弹出窗口{
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
高度：200px；
显示：无；
证明内容：中心；
对齐项目：居中；
}
#信息{
背景：红色；
宽度：100px；
高度：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}


hellow
您可以使用
设置超时
并运行一个显示
警报的函数
不确定问题是什么？您可以使用
设置间隔
@Tareq谢谢。我将尝试并更新。但不建议使用alert（）函数，因为它会暂停时间间隔直到关闭。跨页面使用持久计时器是个不错的主意，但如果用户长时间停留在同一页面上，您仍然需要在此基础上实现时间间隔/超时。是的，您是对的，我编辑并补充说，您可以使用时间间隔轮询更新。