如何让 JavaScript 事件在页面加载时运行？

Question

我是 JS 的新手，并根据我看到的它的展示复制了这种效果，它应该在悬停时“出现故障”文本，然后使其返回原始文本。 这通过使用

.onmouseover

并在之后运行事件来工作。我尝试将其更改为

.onload

，但它不会运行动画/效果，我无法弄清楚为什么它不起作用。

这是我的代码：

const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789"


document.getElementById("load-text").onmouseover = event => {
    let iterations = 0

   const interval = setInterval(() => {
    event.target.innerText = event.target.innerText.split("")
    .map((letter, index) => {
        if (index < iterations) {
            return event.target.dataset.value[index];
        }
        
        return symbols[Math.floor(Math.random() * 35)]
   })
    .join("");

    if(iterations >= event.target.dataset.value.length) clearInterval(interval);

    iterations += 1 / 6;
}, 30);
}

body {   
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    display: flex;
    background-color: #121012;
    justify-content: center;
}
.loader{
    margin-top: 40vh;
    color: #EEEEEE;
    font-family: monospace;
    font-size: 30pt;

}

<div class="loader">
    <p id="load-text" data-value="LOADER"> LOADER </p>
</div>
    <script src="project.js"></script>

（码笔：https://codepen.io/Tesked/pen/ExedNQX）

我已尝试在此线程中使用可能的解决方案 如何在页面加载时调用 JavaScript 函数？ 但它们似乎都不起作用，事件仍然不会触发，除非我添加

.onmouseover

它按预期工作的地方。

这里的想法是将其用作某种“加载屏幕”，它会产生故障效果，然后在页面的其余部分淡出，尽管这是另一个问题。

Answer 1

您需要执行更多步骤，但

DOMContentLoaded

事件适用于此。为了定位它，您还需要在 DOM 中搜索该元素，因为

event.target

将是文档。

const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
// Instead of `event.target` we have to select it first, as the target will be `document`
const element = document.getElementById( 'load-text' )

document.addEventListener( 'DOMContentLoaded', event => {

  let iterations = 0;
  
  const interval = setInterval(() => {
  
    element.innerText = element.innerText.split("").map((letter, index) => {

      if( index < iterations ){

          return element.dataset.value[index];

      }

      return symbols[Math.floor(Math.random() * symbols.length)]

    }).join("");

    if( iterations >= element.dataset.value.length ) clearInterval(interval);

    iterations += 1 / 6;
      
  }, 30);

});

body {   
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
  display: flex;
  background-color: #121012;
  justify-content: center;
}
.loader{
  margin-top: 40vh;
  color: #EEEEEE;
  font-family: monospace;
  font-size: 30pt;
}

<div class="loader">
    <p id="load-text" data-value="LOADER"> LOADER </p>
</div>

Answer 2

我对你的 JS 代码做了一点改动

  const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
  const target = document.getElementById("load-text");
  let iterations = 0;

  const interval = setInterval(() => {
    target.innerText = target.innerText.split("")
      .map((letter, index) => {
        if (index < iterations) {
          return target.dataset.value[index];
        }

        return symbols[Math.floor(Math.random() * symbols.length)];
      })
      .join("");

    if (iterations >= target.dataset.value.length) clearInterval(interval);

    iterations += 1 / 6;
  }, 30);
};

我把这个函数包装在一个

window.onload

里，在你的笔上测试似乎有效 你能试试这个，看看这是不是你所期待的

Answer 3

只需通过以下方式触发事件：

loadingTextEl.dispatchEvent(new MouseEvent('mouseover'));

const loadingTextEl = document.getElementById('load-text')
const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789"

const onMouseOver = (event) => {
  let iterations = 0
  const interval = setInterval(() => {
    event.target.innerText = event.target.innerText.split("")
      .map((letter, index) => {
        if (index < iterations) {
          return event.target.dataset.value[index];
        }
        return symbols[Math.floor(Math.random() * 35)]
      })
      .join("")

    if (iterations >= event.target.dataset.value.length) clearInterval(interval)
    iterations += 1 / 6;
  }, 30)
}

loadingTextEl.addEventListener('mouseover', onMouseOver)

loadingTextEl.dispatchEvent(new MouseEvent('mouseover')) // Trigger

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
  display: flex;
  background-color: #121012;
  justify-content: center;
}

.loader {
  margin-top: 40vh;
  color: #EEEEEE;
  font-family: monospace;
  font-size: 30pt;
}

<div class="loader">
  <p id="load-text" data-value="LOADER"> LOADER </p>
</div>
<script src="project.js"></script>