Question

我是JavaScript新手并尝试构建一个简单的Web应用程序我的要求是，在我启动计时器后，我需要弹出一个消息的应用程序。

修改：请注意，用户可能无法查看此网页，如果是这样，则必须显示该网页，以便用户注意到它，类似于在Windows中引入前面

我之所以要问的是，这很简单，可以在某些框架中实现。我用谷歌搜索，发现计时器有很多实现，但不显示弹出消息。我不需要示例代码，但是如果你可以给出一些指示，比如从哪里开始就会很好。

我将此称为应用程序，因为思考过程是为了改善这一点，以便为用户提供一个允许用户编写内容而不仅仅显示弹出消息的窗口。

我怎样才能实现？
我可以使用哪些框架？
你可以按照我的方法向我展示一个简单的应用程序吗？

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

或者您只需拨打提醒（）....

Answer 4

你需要使用js函数setTimeout（yourFunc，timeDelay）this，yourFunc应该改变css属性或改变css类， display：none ， 显示：阻止 （或其他）。 My example在2秒后显示消息。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

4 个答案: