Typeit.js 从数组中输入随机字符串

Question

这是当前代码并且可以正常工作，但如您所见，我必须为数组中的每个元素手动添加代码。我想在数组中包含更多元素。是否可以编写代码来循环遍历 TypeIt.js 中的每个元素，如果它可以随机选择（或混洗）而不是线性的，那也会更好。

var id="lines";
var element=document.getElementById(id);
var content=[
  "Example sentence one",
  "Another example string two",
  "String three",
  "Another Example String, long sentence, sentence four"
];
var p = 100;

new TypeIt("#lines",{loop:true})

  .type(content[0])
  .pause(p)
  .delete(0-element.innerText.length)

  .type(content[1])
  .pause(p)
  .delete(0-element.innerText.length)

  .type(content[2])
  .pause(p)
  .delete(0-element.innerText.length)

  .type(content[3])
  .pause(p)
  .delete(0-element.innerText.length)

  .go();

<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>

<div id="lines"></div>

Answer 1

您可以将其保存到一个变量中，而不是在初始化 TypeIt 实例后直接链接。然后使用循环将所有字符串添加到实例中。添加字符串后，您可以调用 go 方法来启动它。

var id = "lines";
var element = document.getElementById(id);
var content = [
  "Example sentence one",
  "Another example string two",
  "String three",
  "Another Example String, long sentence, sentence four"
];

var p = 100;

const instance = new TypeIt("#lines", {loop: true});

for(const str of content) {
  instance.type(str).pause(p).delete(0 - str.length);
}

instance.go();

<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>

<div id="lines"></div>

Typeit.js 从数组中输入随机字符串

Typeit.js type random strings from array

javascript

animation

typing

typeit