在 web 应用中，模拟一个字一个字输入的效果，让用户的注意力聚焦在输入的内容上，其实使用的是 web 动画模拟打字机效果。
先看效果
打字机效果主要受到五个变量控制
- 需要展示的文字
value - 打每个字的时间
speed - 打字的方向（打字/删除字）
flag - 展示出来的字
displayText - 索引
index
实现原理
设置一个定时器，每speed钟切换，判断打字方向flag
-
打字方向：索引
index增加，展示的文字displayText增加第index个字- index++
- displayText += value[index]
-
删除方向：索引
index减少，展示的文字displayText减少最后一个字- index--
- displayText.substring(0, displayText.length - 1)
-
判断打字方向
- 当前索引 <= 0 && 正在删除 -> 设置为打字
- 当前索引 >= value.length && 正在打字 -> 设置为删除
具体代码内容看码上掘金展示
点击效果
点击原理
- 将打字状态设置为删除
- 并且切换文字
value
