目录
本文发布于 2年前，其中的信息可能已发生变化，请结合实际情况参考。

用30行代码实现打字机效果

网站上常见的打字机效果其实超简单，30行JS就能搞定，来学学~ ⌨️

效果预览

文字一个一个出现，像有人在实时打字一样。

打字机效果

完整代码

javascript
class Typewriter {
  constructor(element, text, speed = 100) {
    this.element = element;
    this.text = text;
    this.speed = speed;
    this.index = 0;
  }

  type() {
    if (this.index < this.text.length) {
      this.element.textContent += this.text.charAt(this.index);
      this.index++;
      setTimeout(() => this.type(), this.speed);
    }
  }

  start() {
    this.element.textContent = '';
    this.type();
  }
}

// 使用方式
const tw = new Typewriter(document.querySelector('#demo'), 'Hello 可爱世界~', 120);
tw.start();

使用方法

引入JS文件，实例化Typewriter类即可，支持自定义速度。

代码结构

下载完整代码

包含了打字、删除、循环三种模式的完整版本：

下载完整代码

打字机效果非常适合用在博客首页的标语上，增加生动感。

效果展示

30行代码就能搞定，快去试试吧~ 🚀