面向对象实现点击生成随机颜色大小的方块
>实现效果: 点击页面任意地方 会生成一个随机大小的颜色快
<script>
class Rc {
constructor() {
document.body.addEventListener('click', this.getBox.bind(this))
// console.log(this)
}
getBox(e) {
//生成一个区间的随机数 这个值是div的宽和高
let wh = this.random(150, 200)
//.获取鼠标的坐标 - 宽高的一般 指针在div的中间
let x = e.clientX - wh / 2
let y = e.clientY - wh / 2
//创建属性 属性值
this.creatElement('div', {
position: 'absolute',
left: x + 'px',
top: y + 'px',
background: this.color(),
width: wh + 'px',
height: wh + 'px'
})
}
//创建元素
creatElement(ele, styleObj) {
let newEle = document.createElement(ele, styleObj)
//样式合并在一起
Object.assign(newEle.style,styleObj)
//追加到body里面
document.body.appendChild(newEle)
}
//封装随机数
random(x, y) {
let n = Math.max(x, y)
let m = Math.min(x, y)
return parseInt(Math.random() * (n - m) + m)
}
//封装随机颜色
color() {
let arr = []
for (let i = 0; i < 3; i++) {
let items = this.random(0, 255)
arr.push(items)
}
var transparent = Math.random().toFixed(1) //透明度
//拼接rgb
return `rgb(${arr[0]},${arr[1]},${arr[2]},${transparent})`
}
}
let l = new Rc()
// let res = l.random(80, 100)
// console.log(res)
console.log(l.color())
注意
这里要在css里面给html和body设置宽高为100% 不然点击不了