如何使用JavaScript实现打字机(Typewriter)效果并修改部分文字颜色

基础实现代码 #

HTML #

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

CSS #

#typewriter {
  font-size: 24px;
  font-family: monospace;
  /* 内置光标闪烁效果 */
  border-right: 2px solid #000;
  white-space: nowrap;
  overflow: hidden;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink {
  50% { border-color: transparent; }
}
/* 自定义高亮颜色类，可按需修改样式 */
.highlight {
  color: #ff4d4f;
  font-weight: bold;
}

JavaScript #

const typewriterEle = document.getElementById('typewriter');
// 需要变色的文本提前用带自定义类的span标签包裹
const text = '我是JavaScript初学者，现在实现了<span class="highlight">带自定义颜色</span>的打字机效果~';
let index = 0;
const typeSpeed = 150; // 打字间隔，单位为毫秒

function type() {
  if (index < text.length) {
    // 用innerHTML插入内容可识别html标签，自定义样式会自动生效
    typewriterEle.innerHTML = text.slice(0, index + 1);
    index++;
    setTimeout(type, typeSpeed);
  } else {
    // 打印完成后可选择隐藏光标
    // typewriterEle.style.borderRight = 'none';
  }
}

// 启动打字效果
type();

核心逻辑说明 #

• 不要直接操作纯文本插入，提前将需要修改颜色的文本用带自定义类名的span标签包裹，在CSS中为对应类设置颜色、粗细、背景色等样式即可
• 插入内容时使用innerHTML而不是innerText，浏览器会自动解析内容中的标签为DOM元素，对应样式自然生效
• 如果需要实现多段文本轮播打字效果，只需要将text改为数组，循环遍历数组元素执行打印逻辑即可

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