我目前正在运行这个文本动画通过原始HMTL为我的网站,我发现在codepen,我是相当新的编码的东西,只是想让我的网站看起来很好,有没有一种方法,不显示时“onmouseover”,而是显示一次在网站加载,这就是全部.谢谢!这里是JSON脚本:
<script>
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let interval = null;
document.querySelector("h2").onmouseover = event => {
let iteration = 0;
clearInterval(interval);
interval = setInterval(() => {
event.target.innerText = event.target.innerText
.split("")
.map((letter, index) => {
if(index < iteration) {
return event.target.dataset.value[index];
}
return letters[Math.floor(Math.random() * 26)]
})
.join("");
if(iteration >= event.target.dataset.value.length){
clearInterval(interval);
}
iteration += 1 / 3;
}, 30);
}
</script>
我试图改变事件,但我找不到一个“pageload”或什么事件,或一种方法,以限制它为1次后,每次加载。
我试过这个:
<script>
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let interval = null;
document.querySelector("h2").onLoad = event => {
let iteration = 0;
clearInterval(interval);
interval = setInterval(() => {
event.target.innerText = event.target.innerText
.split("")
.map((letter, index) => {
if(index < iteration) {
return event.target.dataset.value[index];
}
return letters[Math.floor(Math.random() * 26)]
})
.join("");
if(iteration >= event.target.dataset.value.length){
clearInterval(interval);
}
iteration += 1 / 3;
}, 30);
}
</script>
还有这个
document.querySelector("h2") = function(){<script>
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let interval = null;
document.querySelector("h2").onmouseover = event => {
let iteration = 0;
clearInterval(interval);
interval = setInterval(() => {
event.target.innerText = event.target.innerText
.split("")
.map((letter, index) => {
if(index < iteration) {
return event.target.dataset.value[index];
}
return letters[Math.floor(Math.random() * 26)]
})
.join("");
if(iteration >= event.target.dataset.value.length){
clearInterval(interval);
}
iteration += 1 / 3;
}, 30);
}
</script>};
什么都没改变。
1条答案
按热度按时间t2a7ltrp1#
看看这个,如果它能达到你的目的。