【发布时间】：2022-01-18 14:03:00
【问题描述】：
我正在制作一个网站，尽管在其中添加一个启动画面会很好，并使网站更加精美。我为它编写了代码，但问题是，文本显示正常，但 文本在设置的 1 秒后不会消失，它不会消失 ，我主要是重新检查并没有发现错误，当我运行它时，它可以工作并且没有给出错误。
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e)=>{
setTimeout(()=>{
splash.classList.add('display-none');
}, 2000);
})body {
padding: 0;
margin: 0;
background: black;
}
.navbar {
overflow: hidden;
padding: 5px;
margin: 0;
top: 0;
position: sticky;
background: black;
color: white;
opacity: 85%;
}
.navbar-item {
display: inline-block;
padding: 5px;
}
.left {
float: left;
font-weight: bold;
font-size: xx-large;
}
.right {
float: right;
font-size: x-large;
}
.no-style-link {
text-decoration: none;
color: inherit;
}
.main-content {
padding: 10px;
text-align: center;
}
.ytvidcollection {
padding: 10px;
background: #6969f8;
}
.ytvid {
padding: 5px;
background: red;
}
.ytvid:hover {
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.copyright {
background: #333030;
color: white;
text-align: center;
bottom: 0;
font-size: x-large;
padding: 10px;
}
#Jothin-kumar {
font-size: xx-large;
text-decoration: none;
color: red;
}
#Jothin-kumar:hover {
text-decoration: underline;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Karan raj</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="splash">
<h1 class="fade-out">Welcome to My Website!</h1>
</div>
<ul class="navbar">
<li class="navbar-item left"><a class="no-style-link" href="/">Karan raj</a></li>
<li class="navbar-item right"><a class="no-style-link" href="/">Home</a></li>
<li class="navbar-item right"><a class="no-style-link" href="/about">About</a></li>
<li class="navbar-item right"><a class="no-style-link" href="/contact">Contact</a></li>
</ul>
<div class="main-content">
<iframe width=75% height="750" src="https://www.youtube.com/embed/gHn85Ytl_4w?controls=0&autoplay=1&modestbranding=1&rel=0" title="Trailer" allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture"></iframe>
<div class="ytvidcollection">
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/pFfOzZ97N2k?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/fZrw7x44UUA?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/XDUVT25yaYM?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/-C7l9q1CSOo?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/djoODhumDFk?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/rvilf-L2Hhw?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/8LnoVbcAPFA?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/0MH9ESonkiU?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/KJSu_8cialA?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/rYcMuSEZOBA?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/bSsH_uCwNbQ?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="copyright">© Copyright 2022 <a href="https://jothin.tech" id="Jothin-kumar">Jothin kumar</a></div>
</body>
</html>【问题讨论】：
-
为什么“DOMContentLoaded”触发后还需要超时？
-
内容加载后需要消失，但预计1s完成
标签： javascript html css web-applications splash-screen