Question

我从codepen（https://codepen.io/anon/pen/LrqmPg）获得了用于自动键入文本动画的代码。我希望我的文字动画在一定的时间延迟（例如5秒）后开始播放

我只有rudimetal编码知识（我是设计师，而不是程序员），因此对您的帮助非常感谢。预先谢谢你。

function consoleText(words, id, colors) {
   if (colors === undefined) colors = ["#fff"];
    var visible = true;
    var con = document.getElementById("console");
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id);
   target.setAttribute("style", "color:" + colors[0]);
    var wordsInterval = window.setInterval(function() {
   if (words.length == 0) {
   window.clearInterval(wordsInterval);
    return;
 }

if (letterCount === 0 && waiting === false) {
  waiting = true;
  target.innerHTML = words[0].substring(0, letterCount);
  window.setTimeout(function() {
    var usedColor = colors.shift();
    //colors.push(usedColor);
    var usedWord = words.shift();
    //words.push(usedWord);
    x = 1;
    target.setAttribute("style", "color:" + colors[0]);
    letterCount += x;
    waiting = false;
  }, 1000);
 } else if (letterCount === words[0].length + 1 && waiting === false) {
    waiting = true;
    window.setTimeout(function() {
       x = -1;
    letterCount += x;
      waiting = false;
      }, 1000);
   } else if (waiting === false) {
    target.innerHTML = words[0].substring(0, letterCount);
    letterCount += x;
   }
  }, 120);
    window.setInterval(function() {
  if (visible === true) {
    con.className = "console-underscore hidden";
   visible = false;
  } else {
    con.className = "console-underscore";

     visible = true;
   }
  }, 400);
}

Answer 1

您好，您可以尝试使用下面的代码，让我知道您正在寻找的东西。

function consoleText(words, id, colors) {
   if (colors === undefined) colors = ["#fff"];
    var visible = true;
    var con = document.getElementById("console");
    var letterCount = 1;
    var x = 1;
    var waiting = false;
    var target = document.getElementById(id);
   target.setAttribute("style", "color:" + colors[0]);
    var wordsInterval = window.setInterval(function() {
   if (words.length == 0) {
   window.clearInterval(wordsInterval);
    return;
 }

if (letterCount === 0 && waiting === false) {
  waiting = true;
  target.innerHTML = words[0].substring(0, letterCount);
  window.setTimeout(function() {
    var usedColor = colors.shift();
    //colors.push(usedColor);
    var usedWord = words.shift();
    //words.push(usedWord);
    x = 1;
    target.setAttribute("style", "color:" + colors[0]);
    letterCount += x;
    waiting = false;
  }, 5000);
 } else if (letterCount === words[0].length + 1 && waiting === false) {
    waiting = true;
    window.setTimeout(function() {
       x = -1;
    letterCount += x;
      waiting = false;
      }, 1000);
   } else if (waiting === false) {
    target.innerHTML = words[0].substring(0, letterCount);

Answer 2

您尝试过吗？

setTimeout(() => {
consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text', ['tomato','rebeccapurple','lightblue']);
}, 5000);

为JS动画文本添加延迟

2 个答案: