html 如何在页面加载时运行JavaScript事件？[重复]

xpcnnkqh 于 2023-03-27 发布在 Java

关注(0)|答案(3)|浏览(125)

此问题在此处已有答案：

How to add onload event to a div element（26个答案）
4天前关闭。
我是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）
我已经尝试在这个线程How do I call a JavaScript function on page load?中使用可能的解决方案，但它们似乎都不起作用，除非我添加.onmouseover，否则事件仍然不会触发。
这里的想法是使用这个作为一个“加载屏幕”的排序，将做毛刺的效果，然后在页面的其余部分褪色，虽然这是一个问题，另一个时间。

Html

来源：https://stackoverflow.com/questions/75813100/how-do-i-make-a-javascript-event-run-on-page-load

3条答案

按热度按时间

nr7wwzry1#

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

window.onload = function() {
  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);
};

我把函数 Package 在一个window.onload里面，在你的笔上测试，看起来很好用，你能试试这个吗？看看这是不是你所期望的。

赞(0）回复(0）举报 2023-03-27

qacovj5a2#

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

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

x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-03-27

svujldwt3#

你还需要几个步骤，但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>

赞(0）回复(0）举报 2023-03-27

我来回答

html 如何在页面加载时运行JavaScript事件？[重复]

3条答案

相关问题

热门标签

最新问答