今天浏览网页无意间看到一个类似打字机效果,
后来百度查了查原理原来就是截取字符串,
自己试着也写了一个记录一下:
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节点字符串,然后每隔多长时间重新截取覆盖原来的字符串,看起来就像是打字的效果一样。
如果有兴趣欢迎借鉴指正不足之处~