影片具有相同類的多個標題

問題解決了

感謝 Nalin Ranjan 的幫助！

影片一個標題的舊解決方案

 const text1 = document.querySelector('.fancy1');
    const strText1 = text1.textContent;
    const splitText1 = strText1.split("");
    text1.textContent = "";

for(let i=0; i<splitText1.length; i  ){
    text1.innerHTML  = "<span>"  splitText1[i]   "</span>";
}

let char1 = 0;
let timer1 = setInterval(onTick,150);

function onTick(){
    const span1 = text1.querySelectorAll('span')[char1];
    span1.classList.add('fade');
    char1  ;
  

    if (char1 === splitText1.length){
       
        complete1();
        return;
    }
}

function complete1(){
   
    clearInterval(timer1);
    timer1 = null;
}

失敗的解決方案 1

我嘗試給五個標題單獨的類名 - 花式 1、花式 2、花式 3、花式 4 和花式 5。

const text = document.getElementsByClassName(".fancy1");
Split(text)
const text = document.getElementsByClassName(".fancy2");
Split(text)

function Split(text){
const strText = text.textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i  ){
   
    text.innerHTML  = "<span>"  splitText[i]   "</span>";
   
}

let char = 0;
let timer = setInterval(onTick,150);
}

function onTick(){
    
    const span = text.querySelectorAll('span')[char];
    span.classList.add('fade');
   
    char  ;
  
    if (char === splitText.length){
    
        complete();
        return;
    }
}

function complete(){
   
    clearInterval(timer);
    timer = null;
}

失敗的解決方案 2

我嘗試使用全域變數

const window.text = document.getElementsByClassName(".fancy1");
Split()
const window.text = document.getElementsByClassName(".fancy2");
Split()
const window.text = document.getElementsByClassName(".fancy3");
Split()
const window.text = document.getElementsByClassName(".fancy4");
Split()

function Split(){
const strText = (window.text).textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i  ){
   
    text.innerHTML  = "<span>"  splitText[i]   "</span>";
   
}

let char = 0;
let timer = setInterval(onTick,150);
}

function onTick(){
    
    const span = text.querySelectorAll('span')[char];
    span.classList.add('fade');
    char  ;
    if (char === splitText.length){
       
        complete();
        return;
    }
}
function complete(){
    clearInterval(timer);
    timer = null;
}

失敗的解決方案 3（基于 Nalin Ranjan 的回復）

在對 Nalin Ranjan 的解決方案進行了一些調整后，我不再在控制臺日志中收到錯誤訊息。但是沒有任何影片發生。

const headers = document.querySelectorAll('.fancy1');

headers.forEach(text => Split(text));

function Split(text){

const strText = text.textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i  ){
   
    text.innerHTML  = "<span>"  splitText[i]   "</span>";
   
}

window.char = 0;
window.timer = setInterval(onTick,1500);
window.text = text
window.splitText = splitText
}

function onTick(){
    
    const span = window.text.querySelectorAll('span')[window.char];
    span.classList.add('fade');
   
    window.char  ;
  
  console.log(window.char)
  console.log(window.splitText.length)
    if (window.char === window.splitText.length){

        console.log("is it working?")
    
        complete();
        return;
    }
}

function complete(){
   
    clearInterval(timer);
    window.timer = null;
}

uj5u.com熱心網友回復：

document.querySelector回傳單個元素作為結果，但是您想將函式應用于多個元素，那么為什么不使用document.querySelectorAll.

試試這個怎么樣...

const headers = document.querySelectorAll('.fancy1');

headers.forEach(header => Split(header));

function Split(text) {

  const strText = text.textContent;
  const splitText = strText.split("");
  text.innerHTML = "";

  for (let i = 0; i < splitText.length; i  ) {

    text.innerHTML  = "<span>"   splitText[i]   "</span>";

  }

  let char = 0;
  let timer = setInterval(onTick, 150);

  function onTick() {
    const spans = text.querySelectorAll('span');
    const currentSpan = spans[char];
    currentSpan.classList.add('fade');

    char  ;

    if (char === splitText.length) {

      complete();
      return;
    }
  }

  function complete() {

    clearInterval(timer);
    timer = null;
  }
}

標籤：javascript html 动画片 css动画

上一篇：異步函式回傳Promise{<pending>}

下一篇：骨骼圍繞父級旋轉-OpenGL影片/蒙皮