时间戳

首页 > 解决方案 > Typeit.js 从数组中输入随机字符串

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

问题描述

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

标签： javascriptanimationtypingtypeit

解决方案

您可以将其保存到变量中，而不是在初始化 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>

推荐阅读