先看例子:
代码:
可以看到我们,我们的图形是不适配的,这时候我们可以添加适配器类进行适配,代码实现如下:
代码:
class element {
constructor(el) {
this.el = el;
}
startMove(num){
this.el.style.left = `${num}px`;
}
}
class adapter {
constructor(element) {
this.element = element;
this.createElement();
}
createElement(){
const div = document.createElement("div");
div.className = "box1";
this.element.el.append(div);
}
startMove(){
this.element.startMove(num);
}
}
var ele = new element(document.querySelector('.box')),
startBtn = document.querySelector('#start');
var adp = new adapter(ele);
startBtn.addEventListener('click', ()=>{
adp.startMove(100);
});
效果:
喜欢的小伙伴可以自己动手实现下,记得不要忘记点赞哦!