html如何打字_在HTML页面模拟打字机效果【效果】

可实现打字机效果的五种方法：一、setInterval逐字追加；二、async/await封装可复用函数；三、CSS光标动画增强真实感；四、HTML解析支持格式标签；五、CSS@property纯CSS方案（需现代浏览器）。

如果您希望在HTML页面中实现类似打字机逐字显示文本的效果，则可以通过JavaScript控制文本的逐字符输出节奏。以下是几种可直接使用的实现方法：

一、使用setInterval实现基础打字效果

该方法通过定时器每隔固定毫秒数向目标元素追加一个字符，直到完整文本输出完毕。适用于静态文本且无需复杂交互的场景。

1、在HTML中创建一个用于显示文本的容器，例如：<p id="typewriter"></p>。

2、定义待显示的字符串，如 const text = "欢迎来到我的网页";。

立即学习“前端免费学习笔记（深入）”；

3、声明索引变量 let index = 0; 并获取目标元素 const el = document.getElementById("typewriter");。

4、调用 setInterval，每次执行时将 text.slice(0, ++index) 赋值给 el.textContent。

5、当 index > text.length 时，使用 clearInterval 停止定时器。

二、使用async/await与setTimeout封装函数

该方法将打字过程封装为可复用的异步函数，避免全局变量污染，支持链式调用和多段文本连续播放。

1、定义异步函数 async function typeText(el, text, delay = 100)，其中 el 是目标DOM元素，text 是要显示的字符串，delay 是每个字符间隔毫秒数。

2、在函数内部使用 for 循环遍历字符串，每次循环前 await new Promise(r => setTimeout(r, delay))。

3、循环中依次设置 el.textContent = text.slice(0, i + 1);。

4、调用时写为 typeText(document.getElementById("typewriter"), "Hello World!");。

三、添加光标闪烁动画增强真实感

仅显示字符不足以模拟真实打字机，需配合一个垂直竖线光标在末尾持续闪烁，提升视觉反馈。

1、在CSS中定义光标样式：@keyframes blink { 50% { opacity: 0; } }，并为类 .cursor 设置 animation: blink 1s infinite;。

标签： css javascript java html node 伪元素 浏览器 edge ai