autoword.gif

第一种方法:

  • 要实现动态带着效果的元素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的元素内的所有内容,比如说按钮,图片等均可。