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

【问题标题】：Typeit.js type random strings from arrayTypeit.js 从数组中输入随机字符串
【发布时间】：2020-10-26 11:59:43
【问题描述】：

这是当前代码，它可以工作，但正如您所见，我必须为数组中的每个元素手动添加代码。我想在数组中有更多元素。是否可以编写代码循环遍历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>

【问题讨论】：

标签： javascript animation typing typeit

【解决方案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>

【讨论】：