如何修改JS打字机效果代码实现文本逐字删除后替换重打功能

实现思路 #

• 先完成原有文本的全量打印，可配置打印完成后的停顿时间
• 按设置的删除长度逐字回删末尾内容，速度与原打字速度保持一致
• 回删完成后逐字打印替换内容，原生支持带HTML标签的样式渲染

完整修改代码 #

typewriter.js #

var arrText = ["This is the original text"]; // 原预设文本
var speed = 80; // 打字/删除速度，数值越小速度越快
var index = 0;
var arrLength = arrText[0].length;
var textPos = 0;
var deleteLength = 4; // 末尾需要删除的字符数，示例对应最后一个单词text的长度
var replaceText = '<em><strong>script</strong></em>'; // 替换的新内容，支持HTML标签
var replaceLength = replaceText.length;

var destination = document.getElementById("typewriter");

function typewriter() {
  destination.innerHTML = arrText[index].substring(0, textPos) + "<span class='blink'>█</span>";
  if (textPos++ != arrLength) {
    setTimeout(typewriter, speed);
  } else {
    // 打印完成后停顿1秒再开始删除，可按需调整时长
    setTimeout(deleteText, 1000);
  }
}

// 逐字删除函数
function deleteText() {
  destination.innerHTML = arrText[index].substring(0, textPos) + "<span class='blink'>█</span>";
  if (textPos-- != arrLength - deleteLength) {
    setTimeout(deleteText, speed);
  } else {
    // 删除完成后开始打印新内容
    setTimeout(typeNewText, speed);
  }
}

// 打印替换内容函数
function typeNewText() {
  var currentContent = arrText[index].substring(0, arrLength - deleteLength) + replaceText.substring(0, textPos - (arrLength - deleteLength));
  destination.innerHTML = currentContent + "<span class='blink'>█</span>";
  if (textPos++ != (arrLength - deleteLength) + replaceLength) {
    setTimeout(typeNewText, speed);
  }
}

// 延迟500ms启动打字效果
setTimeout(typewriter, 500);

index.html #

<div id="typewriter"></div>

style.css #

.blink {
  animation: blink-animation 1400ms steps(2, start) infinite;
  -webkit-animation: blink-animation 1400ms steps(2, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

内容的提问来源于stack exchange，提问作者Koto