Typewriter 打字机文字
A cursor character appended to a growing slice of the string, one character every 120ms. 一个不断变长的字符串切片,后面缀一个光标字符,每 120ms 长一个字。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The whole effect is s.slice(0, i) plus a block character. It uses setTimeout rather than setInterval so that later you can vary the delay per character — punctuation can pause longer than letters, which is the difference between typing and machined output. 整个效果就是 s.slice(0, i) 加一个方块光标。用的是 setTimeout 而不是 setInterval,这样以后可以按字符调整间隔——标点停久一点,才像人在打字,而不是机器在输出。
What to change可以改的地方
- 1Give punctuation a 3× delay for a natural typing rhythm.
- 2Add a small chance of a backspace so it feels like a human correcting itself.
- 1标点符号给 3 倍延迟,节奏立刻自然起来。
- 2加一点小概率的退格,就像人打错字又改回来。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。