JavaScript 实现简易打字机效果的方法

原理概述

实现打字效果的核心思路是将完整的目标字符串拆分为单个字符，利用 setTimeout 设置时间间隔，逐个将字符追加到目标输入框（<input>）的 value 属性中，直到所有字符显示完毕。

具体实现步骤

第1步：构建 HTML 基础结构

创建一个按钮用于触发效果，并准备一个文本输入框作为文字的显示载体。

<input type="button" onclick="start('高考了')" value="start" />
<input type="text" id="here" />

注意：此处为了简化逻辑，直接绑定点击事件调用 start 函数。

第2步：初始化变量与启动逻辑

定义 start 函数接收目标字符串。在函数内部声明全局或局部变量记录当前进度：

• str：存储需要显示的完整字符串。
• len：计算字符串的长度，作为循环结束的判定条件。
• i：当前索引计数器，初始为 0。
• 调用 dwrite() 开始逐字写入过程。

第3步：执行逐字写入动作

编写核心函数 dwrite，获取输入框元素引用，并将 str 中索引为 i 的字符添加到输入框原有值之后。

function dwrite() {
  document.getElementById('here').value =
    document.getElementById('here').value + str.charAt(i);
  if (i++ == len) {
    i = 0;
    return true;
  }
  setTimeout('dwrite()', 500);
}

关键点解析：
- str.charAt(i) 获取指定位置的字符。
- i++ 先比较后自增，当 i 等于长度时说明已写完最后一个字符。
- setTimeout('dwrite()', 500) 每隔 500 毫秒递归调用自身，模拟打字节奏。

第4步：运行结果观察

页面加载完成后点击 "start" 按钮，可以看到 ID 为 here 的输入框中依次出现 “高”、“考”、“了” 三个字，每个字间隔 0.5 秒，直至全部显示完成。

简要总结

上述方法展示了 JavaScript 基础语法在处理字符串和 UI 更新时的应用。虽然现代前端框架有更优雅的组件化方案，但掌握这种底层 DOM 操作有助于深入理解网页交互原理。以上就是 JavaScript 实现打字机效果的详细内容，更多关于 JavaScript 动画技巧的资料请关注本站其它相关文章！