运行文字效果 [英] Running text effect

问题描述

我有一些像漂亮，棒极了，漂亮和精彩的词。

I have some words like "beautiful","awesome","nice" and "wonderful".

我想将每个单词显示为输入文字效果一个接一个地无限时间。

i want to show the each word as typing text effect one after one for infinite time.

看到我想这样：谷歌表格

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

I have made the running text effect. see the code below:

    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);
}

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

i am not able to run this function for each word one after one for infinite time.

请帮我解决这个问题。

提前感谢。

推荐答案

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

You can modify your existing function to accept an array of words, and process the words one by one.

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

Expand this first snippet to see my original answer that has no delay in between words:

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"]);

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

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

Note that you don't need to .split("") the word, because you can directly reference the individual characters in a string with the same square-bracket syntax as referencing array elements, e.g., "text"[2] is "x".

您可以使用时刻设定out（）控制单词之间的延迟：

You can use setTimeout() to control the delay in between words:

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"]);

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

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

Note that this isn't necessarily the cleanest way to structure the code, but it seemed the quickest way to modify what you already had to achieve the desired output.

进一步阅读：立即调用函数表达式（IIFE）。

这篇关于运行文字效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！