JavaScript 带按钮的预加载器不起作用

Question

我正在尝试在 JavaScript 中为我的游戏构建一个“前页”，并创建了一个位于我的主要内容前面的 class。 我为我的 JavaScript 给了我的按钮一个名为 fadeOut() 的“onclick” function，但是它不起作用。

<div id="loader1" class="loader">
  <img src="assets/zelda-quest-white.png" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate nisi ac eros auctor, sed eleifend diam dignissim. Maecenas vel viverra est, vitae volutpat enim. Pellentesque posuere fermentum volutpat. Duis laoreet porttitor dapibus. Phasellus viverra leo augu.</p>
  <button type="button" onclick="fadeOut()">Fade Out</button>
</div>

我创建了一个名为.loader 的 class 并分配了 2s 的不透明度过渡。

.loader {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 2s;
}

并在 JavaScript

  function fadeOut() {
    const square = document.querySelector('#loader1')
    square.style.opacity = '0'
  }

这是页面加载器。

当页面加载时，我希望该内容消失，以便显示我的内容。

Answer 1

我认为 function 有效。 通过运行您的代码，我发现文字的颜色与背景颜色相同，这就是加载页面后只出现一个按钮的原因。

我添加color: white; 在 css 和<div>Main Content</div>在 HTML 的末尾。 单击按钮后出现文本。

 .loader { position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 2s; color: white; }

 <div id="loader1" class="loader"> <img src="assets/zelda-quest-white.png" alt=""> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate nisi ac eros auctor, sed eleifend diam dignissim. Maecenas vel viverra est, vitae volutpat enim. Pellentesque posuere fermentum volutpat. Duis laoreet porttitor dapibus. Phasellus viverra leo augu.</p> <button type="button" onclick="fadeOut()">Fade Out</button> </div> <div>Main Content</div> <script> function fadeOut() { const square = document.querySelector('#loader1') square.style.opacity = '0' } </script>