加载时弹出模式的延迟

Question

I like this script because it's simple, but am new to JS to I'm not sure how to add a 5 second delay before showing the "welcome" greeting.

var hasSeenGreeting = localStorage.getItem("greeting");

if(!hasSeenGreeting){
       document.getElementById("welcome").style.display = "block";
       localStorage.setItem("greeting", "true");
}

document.querySelector(".button").addEventListener("click", function(){
  localStorage.removeItem("greeting", "true");
});

Answer 1

You can use setTimeout(). Here is a reference link .

setTimout(function() {
    document.getElementById("welcome").style.display = "block";
    localStorage.setItem("greeting", "true");
}, 5000); // 5 second delay in ms.

In the code above, I'm passing an anonymous function to the setTimeout call. Inside of that function I'm executing your code for setting the display property of your welcome div - along with setting the localStorage value.

Another way to accomplish this is to put these calls in their own function and then call it in the setTimeout. Example:

var showDiv = function() {
  document.getElementById("welcome").style.display = "block";
  localStorage.setItem("greeting", "true")
}

setTimeout(showDiv, 5000); // 5 second delay in MS.

Here is a JS Fiddle for reference

Good luck!