前一段时间，无意间在某个人的个人页面看到一个很有趣的打字机效果，可以自动的打出一段文字，删掉，然后打出另一段文字。经过半天的尝试，自己写了一个出来。因为没有系统学过JavaScript（只看过一本JavaScript编程精解……），写出来的代码不够简洁和优雅，嵌套了太多if语句。欢迎到Github上提交修改。

GitHub项目地址： https://github.com/greyli/typing.js

DEMO

打字机效果很适合用在个人页面和主页的头部，下面是几个示例。

• 翻相册（页脚）
• https://productmap.co/
• http://www.stephanemartinw.com/

用法

首先把CSS和JS文件放到相应的目录下，然后在HTML文件里分别引入这两个文件：

CSS

<link href="typing.css" rel="stylesheet">

JS

<script src="typing.js"></script>

在需要放置的地方插入下面这行

<span id="words"></span><span id="cursor">|</span>

cursor是文字后面闪烁的光标，你可以更换它。

最后在末尾设置你要定义的字段和相关的设置。首先你需要定义一个数组，然后写入单个或多个字段。

<script>
  var strings = new Array("一段文字"); // 单个字段
</script>

<script>
  var strings = new Array("文段1", "文段2"); // 多个字段
</script>

可选的设置有打字速度和删除速度，是否循环（默认为循环）等。

<script>
  var strings = new Array("文段1", "文段2") ; // multi words
  var typingSpeed = 100; // 打出每个字的间隔时间
  var deleteSpeed = 40; // 删除每个字的间隔时间
  var isLoop = true; // 是否循环，true/false
  var waitTime = 800; // 打完一个字段后的等待时间
</script>

最后

如果你在使用这个JS库，那么请让我知道，我会把你加入DEMO里。