面向对象实现点击生成随机颜色大小的方块

面向对象实现点击生成随机颜色大小的方块

>

实现效果: 点击页面任意地方 会生成一个随机大小的颜色快

  <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% 不然点击不了