Question

我有一些话，比如＆＃34;美丽＆＃34;，＆＃34;棒极了＆＃34;，＆＃34;很好＆＃34;和＃34;精彩＆＃34;。

我希望将每个单词显示为一个接一个地输入文本效果，无限时间。

看我想这样：google forms

我已经制作了正在运行的文字效果。请参阅以下代码：

    var myText= "beautiful";
    var text = myText.split("");
    var counter = 0;

function typeIt(text){

      var SI=setInterval(function(){
      var h1 = $("#myTypingText");

      h1.append(text[counter]);
      counter++;
      if(counter==text.length){
        clearInterval(SI);          
      }       
    },70);
}

我无法一个接一个地为每个单词运行此函数无限时间。

请帮我解决这个问题。

提前感谢。

Answer 1

您可以修改现有函数以接受单词数组，并逐个处理单词。

编辑：展开第一个代码段，看看我的原始答案之间没有延迟：

＆＃13;

function typeIt(words) {
  var letterIndex = 0;
  var wordIndex= 0;
  var h1 = $("#myTypingText");

  var SI = setInterval(function() {
    if (letterIndex === words[wordIndex].length) { // if at end of current word
      wordIndex = (wordIndex + 1) % words.length;  // go to next word
      letterIndex = 0;                             
      h1.empty();                                  // clear output div
    }
    h1.append(words[wordIndex][letterIndex]);
    letterIndex++;
  }, 70);
}

typeIt(["beautiful", "awesome", "nice", "wonderful"]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myTypingText"></div>

＆＃13;

请注意，您不需要.split("")这个词，因为您可以使用与引用数组元素相同的方括号语法直接引用字符串中的各个字符，例如{{1} }是"text"[2]。

您可以使用"x"来控制字词之间的延迟：

＆＃13;

setTimeout()

＆＃13;

function typeIt(words) {
  var letterIndex = 0;
  var wordIndex = 0;
  var h1 = $("#myTypingText");

  (function nextWord() {
    var SI = setInterval(function() {
      h1.append(words[wordIndex][letterIndex]);
      letterIndex++;
      if (letterIndex === words[wordIndex].length) {
        wordIndex = (wordIndex + 1) % words.length;
        letterIndex = 0;
        clearInterval(SI);
        setTimeout(function() {
          h1.empty();
          nextWord();
        }, 1000);  // delay between words
      }
    }, 70);        // delay between letters
  })();
}

typeIt(["beautiful", "awesome", "nice", "wonderful"]);

＆＃13;

请注意，这不一定是构建代码最简洁的方法，但它似乎是修改已经实现所需输出的最快方式。

进一步阅读：Immediately Invoked Function Expressions (IIFEs)。

运行文字效果

1 个答案: