题解 | #文字输出#

不严格按照要求来了，就是一个 打字 加 随机颜色 动画效果。

// 动画的字符串，和目标元素
function myAnimation(string, target) {
  // 选出目标元素，将来放字符串产生的内部html
  const targetEle = document.querySelector(target);
  // 先清空目标原有的内容
  targetEle.innerHTML = "";
  // 这是我们要放的html内容
  let tempHtml = "";
  // 和迭代相关的变量
  let i = 0;
  // 关键 用定时器实现
  let a = setInterval(() => {
    // 分隔字符串到单个字符数组
    const chars = string.split("");
    // 产生一个随机颜色码（e.g.#1fc45d）这里就不详说原理了
    const randomColor =
      "#" + (~~(Math.random() * (parseInt("0xffffff", 16) + 1))).toString(16);
    // 关键步骤
    // 每次新出现的字符其实是 `<span style="color: ${randomColor}">${chars[i]}</span>`
    tempHtml += `<span style="color: ${randomColor}">${chars[i]}</span>`;
    // 迭代变量++
    i++;
    // 把产生的html内容赋给目标
    targetEle.innerHTML = tempHtml;
    // 别忘了，动画的结束
    if(i === chars.length) clearInterval(a);
  }, 200);
}

myAnimation("打字效果动画不难哦！", "#text");