纯 js 实现打字效果

看到有人需要，就把主题里面的代码整理了出来
代码就在下面具体怎么使用自己慢慢琢磨吧，挺简单的东西 并不复杂
首先就 就这么几个属性
classtxt-rotate
data-rotate 眼线是的内容 JSON 格式
data-period 显示完每一段的 延时 单位毫秒

又补充了一下 添加 jQuery 兼容 IE8 (本站就不用看试了，懒得改了[坏笑/])
代码如下：

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<script src="http://api。asilu.com/cdn/jquery.js"></script>

<h1>打字效果演示</h1>
<p><span class='txt-rotate' data-rotate='["测试第 1 段", "测试第 2 段", "测试第 3 段", "测试第 4 段"]' data-period='300' >为了保险这里填写 默认文本</span> &nbsp; </p>
<h4 class='txt-rotate' data-rotate='["有小问题的话可以在QQ群:53571807 里询问，没必要加好友的，好友一多就分不清谁是谁了 ^_^", "终于回来了。。。", "我给你写五万字都行，我 我这不是怕您一读就读成十万字了吗就"]'>为了保险这里填写 默认文本</h4>


<script>
var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = period || 2000;
  this.txt = "";
  this.tick();
  this.isDeleting = false
};
TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];
  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1)
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1)
  }
  this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";
  var that = this;
  var delta = 150 - Math.random() * 100;
  if (this.isDeleting) {
    delta /= 2
  }
  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true
  } else {
    if (this.isDeleting && this.txt === "") {
      this.isDeleting = false;
      this.loopNum++;
      delta = 500
    }
  }
  setTimeout(function() {
    that.tick()
  },
  delta)
};

// 以下方法 可二选一，看个人需要

/* // 1.  支持 getElementsByClassName 的情况下使用 (不兼容 IE8-)
var elements = document.getElementsByClassName("txt-rotate");
if (elements) {
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute("data-rotate");
    var period = elements[i].getAttribute("data-period");
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period)
    }
  }
}
*/

// 2.  不支持 getElementsByClassName 的情况 (兼容 IE8, 需要 jQuery)
$('.txt-rotate').each(function(){
  a = $(this);
  toRotate = a.data('rotate');
  period = a.data('period');
  if (toRotate) {
    new TxtRotate(this, toRotate, (period ? period : 5000))
  }
})
</script>