JavaScript模拟实现键盘打字效果

JavaScript模拟实现键盘打字效果可以通过多种方法实现，下面是一种简单易懂的方法。

思路

1. 定义一个文本框，将需要打印的文字放到文本框中
2. 定义一个计时器，每隔一定时间取出文本框中的一个字符并将字符添加到展示文本框内
3. 当文本框内的所有字符都被打印后清除计时器，完成打字效果

代码实现

//HTML
<div id="text"></div>

//JavaScript
const text = 'Hello World! I am typing on the keyboard.'; //定义需要打印的文本内容
const textDiv = document.getElementById('text');  //获取展示文本框

let i = 0;  //用于数组计数
let timer = setInterval(() => {
  textDiv.innerText += text[i++];  //每隔一段时间插入一个字符
  if (i >= text.length) {  //如果所有字符已经添加完毕
    clearInterval(timer);  //停止计时器
  }
}, 100);

上述示例中，我们通过定义需要打印的文本内容，获取展示文本框，以及每隔一定时间插入一个字符并判断是否完成打印，来实现了基本的打字效果。

示例2：模拟用户输入

有时打字效果需要模拟用户输入的场景，可以在每个字符插入到展示文本框中前随机延长等待时间来实现该效果。

//HTML
<div id="text"></div>

//JavaScript
const text = 'Hello World! I am typing on the keyboard.'; //定义需要打印的文本内容
const textDiv = document.getElementById('text');  //获取展示文本框

let i = 0;  //用于计数
let timer = setInterval(() => {
  setTimeout(() => {  //添加延时等待效果
    textDiv.innerText += text[i++];  //每隔一段时间插入一个字符
    if (i >= text.length) {  //如果所有字符已经添加完毕
      clearInterval(timer);  //停止计时器
    }
  }, Math.random() * 500 + 100);  //增加随机等待时间
}, 100);

上述示例中，我们在每个字符插入到展示文本框中前增加了随机等待时间，来模拟用户输入的效果。