class animate{
constructor(element,rate){
this.element=element
this.rate=rate||12;
}
getmessage(){
if((this.element.indexOf(".",0)!=-1&&this.element.indexOf(".",0)==0)){
var ele=window.document.querySelector(this.element);
console.log(this.element.indexOf(".",0))
console.log(this.element)
}
else{
var ele=window.document.getElementById(this.element);
console.log(this.element)
}
console.log(ele)
let [width , height]=[ele.offsetWidth,ele.offsetHeight]
return {document:ele,widths:width,heights:height}
}
wordsjob(){
let num=this.getmessage();
console.log(num)
for(let i =0;i<100;i++){
let div=document.createElement("div")
div.style.width=parseInt(num.widths)/10+"px";
div.style.height=parseInt(num.heights)/10+'px';
div.style.float="left";
div.style.background="#ffffff";
num.document.append(div);
let hidden=1;
let childs=num.document.children;
let form=0;
let timeovt= setInterval(function () {
let optys=hidden;
while (optys<=0){
childs[form].style.opacity=(optys-=0.5);
}
childs[form].style.visibility="hidden";
form+=1;
if(form>= childs.length){
clearInterval(timeovt);
console.log("aaa")
num.document.remove();
}
return
},this.rate)
}
}
init(){
this.wordsjob();
}
}
关于es6的类封装;
首先es5的原型链和es6的类的根本区别就是this的指向问题,对象中的函数this指向是window,但是es6类解决了这个问题 里面的this指向永远都是这个类对象 而且包括继承 方法的重写都很方便,如果重写方法类名。prototype.方法名 如果继承类属性 则 class 类名 extends 父类名constructor中写 子类添加属性,super()中写父类继承属性
这个是一个把所引入元素切割100份渐变显示的动画封装类