实现文字打字机效果显示

今天浏览网页无意间看到一个类似打字机效果，

后来百度查了查原理原来就是截取字符串，

自己试着也写了一个记录一下：

function Write(dom,speed){
this.dom=dom;
this.numInit=0;
this.textInit=dom.innerHTML;
this.speed=speed;
this.inter();
}
Write.prototype={
   constructor:Write,
   inter(){
const that=this;
      setInterval(function(){
         that.numInit++;
         that.dom.innerHTML=that.textInit.substr(0,that.numInit)+"__";
         that.dom.style.display="block";
if(that.dom.innerHTML.length-1==that.textInit.length){
            that.dom.innerHTML=that.textInit;
         }
      },that.speed)
   }
}
new Write(
   document.getElementsByTagName("div")[0],//获取文字所在dom父节点
100//设置文字“打字”速度
);

 原理其实就是截取dom节点字符串，然后每隔多长时间重新截取覆盖原来的字符串，看起来就像是打字的效果一样。

如果有兴趣欢迎借鉴指正不足之处~ 

 

转载于:https://www.cnblogs.com/lizhixuan/p/6583113.html