思路:
1.按钮
2.绑定事件
3.各种方法
4.拼接方法
<input type="button" value="按钮">
<script>
class colors{
constructor(){
//获取按钮页面节点
this.body = this.$("body");
this.btn = this.$("input");
//绑定按钮监听事件
this.btn.addEventListener("click",this.clickFn.bind(this));
}
//点击事件
clickFn(){
let color = this.getColor();
//设置背景颜色
this.body.style.background = color;
}
//获取颜色方法(原理:拼接六个被十六进制转换的随机0-15的数)
getColor(){
let color = "#";
for(let i=0 ; i<6 ; i++){
color += this.getRandom(0,15).toString(16);
}
return color;
}
//获取随机数方法(获取两个数之间的随机数)
getRandom(min,max){
return Math.round(Math.random()*(max-min)+min);
}
//绑定节点方法
$(tag){
return document.querySelector(tag);
}
}
new colors
</script>