javascript 如何在页面加载后立即显示迭代?

bsxbgnwa  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(133)

我目前正在运行这个文本动画通过原始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>};

什么都没改变。

t2a7ltrp

t2a7ltrp1#

看看这个,如果它能达到你的目的。

<script>

const animation = () => {
  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  let interval = null;

  const h2El = document.querySelector("h2");  
  let iteration = 0;
  
  clearInterval(interval);
  
  interval = setInterval(() => {
    h2El.innerText = h2El.innerText
      .split("")
      .map((letter, index) => {
        if(index < iteration) {
          return h2El.dataset.value[index];
        }
      
        return letters[Math.floor(Math.random() * 26)]
      })
      .join("");
    
    if(iteration >= h2El.dataset.value.length){ 
      clearInterval(interval);
    }
    
    iteration += 1 / 3;
  }, 30);
}

document.addEventListener('DOMContentLoaded', function() {
  animation();
});

</script>

相关问题