每小時在瀏覽器中使用javascript彈出一條消息

Question

我是JavaScript的新手，正在嘗試構建一個簡單的Web應用程序。
我的要求是，啟動計時器后，我需要應用程序彈出消息。

編輯：請注意，用戶可能未在瀏覽此網頁，如果這樣，則必須強制顯示該網頁，以便用戶注意到它，類似於在Windows中顯示在前面

我問的原因是這非常簡單，並且可以在某些框架中實現。 我在Google上搜索，發現計時器有很多實現，但是沒有顯示彈出消息。 我不需要示例代碼，但是如果您可以給出一些指示，例如從哪里開始，那將很好。

我將其稱為應用程序，因為考慮的過程是將來進行改進以提供一個窗口，該窗口允許用戶編寫一些內容，而不僅僅是顯示彈出消息。

我該如何實現？
我可以使用哪些框架？
您可以按照我的方法向我展示一個簡單的應用程序嗎？

Answer 1

您可以像這樣開始和停止點擊間隔

$(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
    });
});

Answer 2

如果您有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

編輯2：我有一個喜歡，所以我改進了我的代碼：

HTML：

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

JS：

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();

小提琴： https ： //jsfiddle.net/pwd46259/

Answer 3

您將需要一個函數使用setInterval每小時調用一次

setInterval(yourFunction, 1000 * 60 * 60);

在您的函數中，您可以建立自己的彈出窗口。.https ://www.w3schools.com/js/js_popup.asp

或者您可以簡單地調用alert（）。

Answer 4

您需要使用js函數setTimeout（yourFunc，timeDelay） this ，yourFunc應該更改css屬性或更改css類， 顯示：無 ， 顯示：塊 （或其他）。 我的示例在2秒后顯示消息。

 const popUp = document.getElementById('popUp'); setTimeout(() => { popUp.style.display = 'flex'; }, 2000); 

 #popUp { positon: fixed; top:0; left: 0; bottom: 0; right:0; height: 200px; display: none; justify-content: center; align-items: center; } #message { background: red; width: 100px; height: 50px; display: flex; justify-content: center; align-items: center; } 

 <div id='popUp'> <div id='message'> hellow </div> </div>