javascript - 写动画

Question

我有一个动画句子的javascript（使用“innerHTML”写入和删除它），在这个例子中，每个元素我只能使用一个，我想用HTML调用它并在PHP变量中指示短语。所以我只想对多个元素使用 1 个 Javascript 文件。

我想要的示例：

<div id = "Phrases" onload = "animWrite (phrase, element id);"></div>

链接：http: //jsfiddle.net/yLireJ/qoaw2ce5/6/

<div id="sbFrases">&#9654; </div>

标签： javascripthtml

Answer 1

对其进行功能化，以便您可以重用它：

var FrasesA = ['I\'m brazilian', ' and I need help', 'because', 'I want to be a', 'Web Designer'];

var FrasesB = ['I\'m english', ' and I need help', 'because', 'I want to be', 'normal', ':p'];

function typer(phrases, id) {
  var div = document.getElementById(id);

  function escrever(str, done) {
      var char = str.split('').reverse();
      var typer = setInterval(function() {
          if (!char.length) {
              clearInterval(typer);
              return setTimeout(done, 500);
          }
          var next = char.pop();
          div.innerHTML += next;
      }, 100);
  }

  function limpar(done) {
      var char = div.innerHTML;
      var nr = char.length;
      var typer = setInterval(function() {
          if (nr-- == 2) {
              clearInterval(typer);
              return done();
          }
          div.innerHTML = char.slice(0, nr);
      }, 100);
  }

  function rodape(conteudos) {
      var atual = -1;
    function prox(){
      if (atual < conteudos.length - 1) atual++;
      else atual = 0;
      var str = conteudos[atual];
      escrever(str, function(){
        limpar(prox);
      });
    }
    prox();
  }

  rodape(phrases);
}

typer(FrasesA, 'sbFrasesA')
typer(FrasesB, 'sbFrasesB')

<div id="sbFrasesA">&#9654; </div>
<div id="sbFrasesB">&#9654; </div>