打字效果：Word per Word [关闭]

Question

我一直在研究如何获得一个单词一个单词而不是一个字母一个字母的打字效果。到目前为止，我搜索过的所有链接都提供逐字母打字机效果。

https://macarthur.me/typeit/ https://github.com/mattboldt/typed.js/

这有可能实现吗？或者你做过类似的事情吗？

Answer 1

这很容易。 只需注册一个间隔，拆分您的文本，反转数组并弹出最后一项。然后附加到文本容器的那个。完成。

JS

var myText = "Some text you want to be typed automagically..";
var myWords = myText.split(" ").reverse();

var ntrvl = setInterval(function() {
  addNextWord();
}, 150);

function addNextWord() {
  var nextWord = myWords.pop();
  if(nextWord !== undefined) {
      var textNow = $(".write-here").text() + " " + nextWord;
      $(".write-here").text(textNow);
  }
}

你怎么看？

JSfiddle

Answer 2

使用您想要一次打印的任何单词创建一个数组。

const sentence = 'this sentence will be displayed one word at a time';
var arrayOfWords = sentence.split(' ');

for (var i = sentence.length - 1; i >= 0; i--) {
    setTimeout(function(){
        console.log(sentence[i]); // or display another way
    }, 400) // set this to your desired interval
}