英文:
js script not running on load
问题
这是您想要的翻译：
第一次在这里发布，所以不太确定会怎么样，但还是试试吧：
我从一个视频中拿了一些代码，该视频教如何在光标悬停在文本上时发生酷炫的黑客效果，不断将每个字母更改为随机字母。我的计划是将其调整，以便在页面加载时产生效果。
测试下面的文件会产生与视频中预期的效果 - 当鼠标悬停在文本上时，效果会播放。
为了获得我想要的效果，我将 `document.querySelector("h1").onmouseover = event => {...` 更改为 `document.querySelector("h1").onload = event => {...`，尽管这会完全停止效果播放。查找后，我发现使用 window.onload 应该等待页面上的所有内容加载完成，但我绝对不知道如何在不必重写大部分代码的情况下实现它。我还尝试将其更改为函数 text() 并使用 `<h1 onload="text()">` 调用它，但也没有奏效。
这似乎可能是一个容易解决的问题，但我已经寻找了一个多小时了，但没有找到解决方法。
英文:
first time posting here so not too sure how this is going to go but here goes:
i took some code from a video on how to make a cool hacker-esque effect happen to some text when the cursor hovers over it, constantly changing each letter to a random letter. my plan was to adapt it so that it would have the effect when the page loads.
<h1 data-value="test">test</H1>
<link rel="stylesheet" href="format.css">
<script>
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
document.querySelector("h1").onmouseover = event => {
let iterations = 0;
const interval = setInterval(() => {
event.target.innerText = event.target.innerText.split("")
.map((letter, index) => {
if (index + 4 < iterations / 3) {
return event.target.dataset.value[index];
}
return letters[Math.floor(Math.random()*26)]
})
.join("");
if(iterations >= (4 + event.target.dataset.value.length) * 3) clearInterval(interval);
iterations +=1
}, 30);
}
</script>
testing the file below results in the expected result from the video - when the mouse hovers over the text, the effect plays.
to get the effect that i wanted, i changed document.querySelector("h1").onmouseover = event => {... to document.querySelector("h1").onload = event => {... although it just stops the effect from playing altogether. looking it up, i found that using window.onload should wait until everything on the page has loaded but i have absolutely no clue how to implement it without having to rewrite most of the code. i also tried changing it to be in the function text() and called it using <h1 onload="text()"> although that didn't work either.
this feels like it's probably an easy fix but i've been looking for over an hour now to no avail
答案1
得分: 1
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const init = () => {
const target = document.querySelector("h1");
let iterations = 0;
const interval = setInterval(() => {
target.innerText = target.innerText.split("")
.map((letter, index) => {
if (index + 4 < iterations / 3) {
return target.dataset.value[index];
}
return letters[Math.floor(Math.random()*26)]
})
.join("");
if(iterations >= (4 + target.dataset.value.length) * 3) clearInterval(interval);
iterations +=1
}, 30);
}
init();
英文:
If you only want to get this animation on load you can try this:
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const init = () => {
const target = document.querySelector("h1");
let iterations = 0;
const interval = setInterval(() => {
target.innerText = target.innerText.split("")
.map((letter, index) => {
if (index + 4 < iterations / 3) {
return target.dataset.value[index];
}
return letters[Math.floor(Math.random()*26)]
})
.join("");
if(iterations >= (4 + target.dataset.value.length) * 3) clearInterval(interval);
iterations +=1
}, 30);
}
init();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论