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

Question

我是JavaScript新手，嘗試構建簡單的Web應用程序。
我的要求是，我啓動計時器後，我需要應用程序彈出消息。

編輯：注意，用戶可能無法查看此網頁，如果是的話，它是強制性的是讓用戶注意到它顯示出來，類似於大家帶來前方窗戶

原因的東西爲什麼我問的是這很簡單，並且可以在一些框架中實現。我搜索了一下，發現有很多定時器的實現，但不顯示彈出消息。我不需要示例代碼，但如果你可以給出一些方向，比如從哪裏開始，那將是很好的。

我把這稱爲一個應用程序，因爲思考過程是爲了在將來改進這個窗口，讓用戶寫一些東西而不是僅僅顯示彈出消息。

我該如何做到這一點？
我可以使用什麼框架？
你能告訴我一個簡單的應用程序，遵循我的方法嗎？

Answer 1

您需要的功能與setInterval的

setInterval(yourFunction, 1000 * 60 * 60); 

叫它每隔一小時在你的功能，你可以建立一個彈出你的自我.. https://www.w3schools.com/js/js_popup.asp

，或者你可以簡單地調用一個警報（） ....

Answer 2

您可以啓動和停止的時間間隔上點擊這樣

$(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 3

如果你有本地存儲，你可以創建一個簡單持續 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 4

你需要使用js函數的setTimeout（yourFunc，純滯後）this，yourFunc應該改變CSS屬性或更改CSS類，顯示：無，顯示：塊（或其他）。 012s在2s後顯示消息。

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>