打字机效果
JS 打字机效果比纯 CSS 版强大：支持多行、任意文本、变速、删除重打（循环）。核心是一个 setInterval/rAF 定时器，逐字把字符串追加到元素里。
进阶：维护“字符队列”循环播放多句话（打字→停顿→删除→下一句）；光标用元素的 ::after（border-right）常驻闪烁，比每次拼接字符串省事。
- setInterval 每 60~120ms 追加一个字符
- 循环语录：打完停顿 → 逐字删除 → 下一句
- 光标交给 ::after，闪烁用 CSS 动画
HTML
<style> #typewriter { text-align: center; font-size: 22px; margin: 40px 0; font-family: Consolas, monospace; min-height: 34px; } #typewriter::after { content: ""; display: inline-block; width: 2px; height: 22px; background: #a371f7; margin-left: 3px; vertical-align: -4px; animation: caretBlink .9s step-end infinite; } @keyframes caretBlink { 50% { opacity: 0; } } </style> <div id="typewriter"></div> <script> var words = ['学 JS 特效，先从 DOM 开始。', '轮播、灯箱、选项卡都是三步走。', '动画交给 requestAnimationFrame。']; var el = document.getElementById('typewriter'); var wi = 0, ci = 0, del = false; function tick() { var w = words[wi]; if (!del) { // 打字 el.textContent = w.slice(0, ++ci); if (ci === w.length) { del = true; setTimeout(tick, 1500); return; } } else { // 删除 el.textContent = w.slice(0, --ci); if (ci === 0) { del = false; wi = (wi + 1) % words.length; } } setTimeout(tick, del ? 40 : 120); // 删除快、打字慢 } tick(); </script>
本节要点JS 打字机 = 定时器逐字 slice + 删除/下一句循环；光标用 ::after 分离。
