js实现动态打字效果

第一种方法：

• 要实现动态带着效果的元素id设置为text
• str是要打的字

 <script>
  var divTyping = document.getElementById('text');
  var  i = 0,
    timer = 0,
    str = '大家好，我是一个打字机，我会自己打字哦'

  function typing () {
    if (i <= str.length) {
      divTyping.innerHTML = str.slice(0, i++) + '_'
      timer = setTimeout(typing, 200)
    }
    else {
      divTyping.innerHTML = str//结束打字,移除 _ 光标
      clearTimeout(timer)
    }
  }

  typing()
 </script>

第二种：

github地址

• 引入typing.js文件
• id为source的元素内的所有内容将被打印
• id为output的元素将显示被打印的内容

在页面底部调用以下代码：

<script>
  var typing = new Typing({
    source: document.getElementById('source'),
    output: document.getElementById('output'),
    delay: 80,
    done: function() {} //完成打印后的回调事件
  });
  typing.start();
</script>

两种方法的比较：

第一种方法只能用于打印文本
第二种方法比较强大，可以打印id为source的元素内的所有内容，比如说按钮，图片等均可。