Question

我有一个代码片段来显示差异句子的打字效果，但它们是随机的。

这是我的个人网站，但不幸的是，我对JS不满意

let typed = "";
const element = document.querySelector(".typity");

function startType(pun, index) {
  if (index < pun.length) {
    typed += pun.charAt(index);
    element.innerHTML = typed;
    index++;
    setTimeout(function() {
      startType(pun, index);
    }, 50);
  } else {
    setTimeout(function() {
      element.classList.add("highlight");
    }, 1000);

    setTimeout(function() {
      element.classList.remove("highlight");
      typed = "";
      element.innerHTML = typed;
      startType(getRandomPun(), 0);
    }, 2500);
  }
}

function getRandomPun() {
  const puns = [
    "A backwards poet writes inverse.",
    "A bicycle can't stand on its own because it's two-tired.",
    "A book just fell on my head. I've only got my shelf to blame.",
    "Yesterday I swallowed food coloring, I dyed a little on the inside."
  ];
  const index = Math.floor(Math.random() * puns.length);

  return puns[index];
}

startType(getRandomPun(), 0);

我希望它们按顺序1个显示1个，然后再返回第1个显示

Answer 1

您可以使用称为 vara.js

的 js库

<a href="https://codepen.io/umer2001uf/pen/yLLMPKG">here</a>

将随机数组变成顺序数组

1 个答案: