延迟后添加类与香草的JavaScript [英] Add class after delay with vanilla javascript

问题描述

我正在制作一个带有启动画面的网站，我想在3秒后消失。我可以成功地做到这一点，当我包括jQuery，但这需要时间来加载（尤其是如果它没有缓存），所以飞溅仍然显示一小会儿。

我我也使用cookies，以便它只会在页面的第一次加载时显示（所以它不会太过刺激）。

这是我的HTML：

 < div class =splash> 
启动内容
< / div> 
  

下面是工作jQuery（我想避免）：

  if（document.cookie.indexOf（visited = true）=== -1）{
 $（。splash）。delay 3000）.queue（function（）{
 $（this）.addClass（hidden）。dequeue（）; 
}）; 
} else {
 $（。splash）。addClass（hidden）; 
} 
  

以下是关于javascript的内容，但不起作用：

  document.getElementsByClassName（splash）。addEventListener（load，
 function（）{
 if（document.cookie.indexOf（visited = true）=== -1）{
 setTimeout（function（）{
 this.classList.add（hidden）; 
}，3000）; 
} else {
 this.classList.add（hidden）; 
} 
}）; 
  

解决方案

我不认为你想添加函数作为启动的加载事件侦听器。您应该将其添加到页面的 load 事件中。

有关重组代码的更多详细信息，请参阅内联注释。不幸的是，它在堆栈溢出代码片段环境中不适用于Cookie。

请注意，默认情况下，splash设置为隐藏（通过CSS）。这是比默认显示更好的做法，然后隐藏它。如果在读取cookie后确定不应该显示飞溅，则由于处理限制，某些用户可能会在屏幕上瞬间看到飞溅，或者如果代码中存在任何类型的错误，飞溅可能会被显示出来，并且永远不会被带走，因为JS会在错误处停止执行。

  //获取对splash splash的引用splashvar = document.querySelector（。splash）; //当窗口被加载时.... window.addEventListener（load，function（）{// Check （document.cookie.indexOf（visited = true）=== -1）{//显示飞溅（记住：splash默认由CSS隐藏）飞溅。如果cookie指示第一次访问if（document.cookie.indexOf（visited = true）=== -1） classList.remove（hidden）; // .5秒后，隐藏飞溅setTimeout（function（）{ splash.classList.add（ 隐藏）; //>>设置Cookie以访问此处<< }，500）; }}）;  

.splash {height：200px;宽度：200像素;背景：yellow;}。hidden {display：none;}

< div class =splash hidden> SPLASH！< / div>

I am making a website with a splash screen that I want to make disappear after 3 seconds. I can successfully do it when I include jQuery, but this takes time to load (especially if it's not cached) and so the splash still displays for a small time.

I am also using cookies so that it will only show on the first load of the page (so it's not overly irritating).

Here's my HTML:

<div class="splash">
    splash content
</div>

Here's the working jQuery (that I want to avoid):

if(document.cookie.indexOf("visited=true") === -1) {
    $(".splash").delay(3000).queue(function(){
        $(this).addClass("hidden").dequeue();
    });
} else {
    $(".splash").addClass("hidden");
}

Here's what I have come up with regarding javascript, but it doesn't work:

document.getElementsByClassName("splash").addEventListener("load",
function() {
    if(document.cookie.indexOf("visited=true") === -1) {
        setTimeout(function(){
            this.classList.add("hidden");
        }, 3000);
    } else {
        this.classList.add("hidden");
    }
});

解决方案

I don't think you want to add the function as the load event listener of the splash. You should add it to the load event of the page.

See comments inline for more details on reorganizing the code. Unfortunately, it won't work with cookies here in the Stack Overflow snippet environment.

Note that the splash is set to be hidden (via CSS) by default. This is a better practice than showing it by default and then hiding it. If, after reading the cookie, it is determined that the splash should not be shown, some users may wind up seeing the splash momentarily on their screens due to processing limitations, or worse if there is any kind of error in your code, the splash may wind up being shown and never taken away because the JS stops executing at the error.

// Get a reference to the splash dialog
var splash = document.querySelector(".splash");

// When the window is loaded....
window.addEventListener("load", function() {
  
  // Check to see if the cookie indicates a first-time visit
  if(document.cookie.indexOf("visited=true") === -1) {

    // Reveal the splash (remember: splash is hidden by default by CSS)
    splash.classList.remove("hidden");
    
    // .5 seconds later, hide the splash
    setTimeout(function(){
      splash.classList.add("hidden");
      
      // >> Set cookie to visited here <<
    }, 500);
  } 
});

.splash {
  height:200px;
  width:200px;
  background:yellow;
}

.hidden {
  display:none;
}

<div class="splash hidden">S P L A S H !</div>

这篇关于延迟后添加类与香草的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！