时间戳

首页 > 解决方案 > 用单个跨度作为字母替换文本的 div 并遍历它

javascript - 用单个跨度作为字母替换文本的 div 并遍历它

问题描述

我试图用span每个字母的单个元素替换文本的 div，这很简单，但我试图让这些跨度字体大小逐渐增加，我不知道在 setTimeout 函数中要扔什么。 

<div id ="foo"> Welcome to Here </div> 

function test() {

  let word = document.getElementById('foo');
  let arr = word.split("")
  word.innerHTML = "";
  arr.forEach((x,index) => {
    let newSpan = document.createElement('span')
    newSpan.innerHTML = x;
    word.appendChild(newSpan);
    setTimeout(() => {
    ????
       }, 100 + index*100)

 })    
}

标签： javascript

解决方案

他是 settimeout 的又一次尝试

    function test() {
      var fontSize = 12;
      let word = document.getElementById('foo');
      let arr = word.innerHTML.split("")
      word.innerHTML = "";
      arr.forEach((x,index) => {
      var fs = (fontSize + index) +"px";
        let newSpan = document.createElement('span')
        newSpan.innerHTML = x;
        
        word.appendChild(newSpan);
        
        setTimeout(function(){ 
        
        newSpan.style.fontSize = fs
        }, 2000 + (index * 100));
     })    
    }

    test();
    span{
    display : inline-block;
    font-size:12;

    }
    <div id ="foo"> Welcome to Here </div>

推荐阅读