2022-05-19 鼠标点击产生颜色宽高样式的随机div色块,并做出面向对象和原型对象修改

需求

通过鼠标点击事件向body添加节点,
来产生宽高,背景色,圆弧数据都完全随机的div色块

面向过程

要点

首先要封装一个产生随机数的函数
然后分别封装产生宽高,背景色,圆弧的函数,调用上面的函数
在鼠标点击事件中进行节点创建,添加样式(此处调用上面的函数),追加到body

代码

document.onclick = function(eve) {
    var x = eve.clientX,
        y = eve.clientY;
    var num = randNum(50, 100) + "px"; //调用randNum()
    document.body.appendChild(createDiv("div", { //调用createDiv()
        width: num,
        height: num,
        background: getColor(),
        position: 'absolute',
        left: x + 'px',
        top: y + 'px',
        borderRadius: randNum(0, 50) + '%',
        opacity: randNum(50, 100)
    }));
};
/*******函数定义区*****/
// 创建节点
function createDiv(tag, styleObj) { //形参tag就是div,li等等的统称,styleObj是节点的宽高等样式组成的数组对象
    this.eleObj = document.createElement(this.tag);
    for (var attr in styleObj) { //for in遍历对象
        eleObj.style[attr] = styleObj[attr]; //把创建的节点的样式与形参styleObj样式对象的每个元素对应
    }
    return eleObj;
}
// 获取16进制的随机颜色
function getColor() {
    // #ef364a
    var c = "#";
    for (var i = 0; i < 6; i++) {
        c += randNum(0, 15).toString(16);
    }
    return c;
}
// 获取随机数
function randNum(min, max) {
    return Math.round((max - min) * Math.random() + min);
}

  </script>
</body>

</html>

面向对象

要点

把面向过程的函数写成对象方法,再调用这个对象

代码

let DIV = {
    // 报错:...is not defined,原因就是没有在前面加上this
    /******属性******/
    eleObj: '', //全局属性:保存创建的节点
    /******方法******/
    // 绑定事件
    bindEve() {
        document.onclick = function(eve) {
            this.x = eve.clientX;
            this.y = eve.clientY;
            /*放到点击事件中:点击一次创建节点设置样式追加节点的操作*/
            // 调用样式设置
            this.setStyle();
            /*报错:this.setStyle is not a function
            原因:this指向了document,应让它指向eleObj
            解决:bind(this)*/
        }.bind(this);
    },
    //设置样式
    setStyle() {
        var num = this.randNum(50, 100) + "px"; //调用this.randNum()
        this.createDiv("div", { //调用createDiv()
            width: num,
            height: num,
            background: this.getColor(),
            position: 'absolute',
            left: this.x + 'px',
            top: this.y + 'px',
            borderRadius: this.randNum(0, 50) + '%',
        });
    },
    // 创建节点
    createDiv(tag, styleObj) {
        this.eleObj = document.createElement(tag); //形参tag不用加this
        Object.assign(this.eleObj.style, styleObj); //合并对象
        //创建完就可以追加到body
        document.body.appendChild(this.eleObj);
    },
    //随机颜色
    getColor() {
        // #ef364a
        var c = "#";
        for (var i = 0; i < 6; i++) {
            c += this.randNum(0, 15).toString(16);
        }
        return c;
    },
    //随机数
    randNum(min, max) {
        return Math.round((max - min) * Math.random() + min);
    }
}
DIV.bindEve(); //调用

原型对象

要点

把对象的方法写在原型对象上

代码

function DIV(tag, styleObj) {
    this.eleObj = '';
    document.onclick = function(eve) {
        this.x = eve.clientX;
        this.y = eve.clientY;
        //调用创建节点方法
        this.createEle();
        //调用设置样式方法
        // this.setStyle(styleObj);
        // styleObj && this.setStyle(styleObj); //样式存在就设置:并非所有节点都需要样式
        var num = this.randNum(50, 100) + "px"; //调用this.randNum()
        styleObj && this.setStyle({
            width: num,
            height: num,
            background: this.getColor(),
            position: 'absolute',
            left: this.x + 'px',
            top: this.y + 'px',
            borderRadius: this.randNum(0, 50) + '%',
        })
    }.bind(this);
}
/*******把对象方法写在原型对象上******/
// 生成节点
DIV.prototype.createEle = function(tag) {
    this.eleObj = document.createElement(tag); //节点的创建
};
// 设置样式
DIV.prototype.setStyle = function(styleObj) {
    Object.assign(this.eleObj.style, styleObj); //合并对象
    //创建完就可以追加到body
    document.body.appendChild(this.eleObj);

};
// 设置随机数
DIV.prototype.randNum = function(max, min) {
    return Math.round((max - min) * Math.random() + min);
};
// 设置随机颜色
DIV.prototype.getColor = function() {
    var c = "#";
    for (var i = 0; i < 6; i++) {
        c += this.randNum(0, 15).toString(16);
    }
    return c;
};

//实例化
// new DIV("div", {
//     width: num,
//     height: num,
//     background: this.getColor(),
//     position: 'absolute',
//     left: this.x + 'px',
//     top: this.y + 'px',
//     borderRadius: this.randNum(0, 50) + '%',
// });
/*鼠标未点击,还没有样式产生,因此yhui对象写在styleObj那里
实例化这边只需要传一个true,告知要传样式即可*/
new DIV("div", true);//只需要new,就会自动调用构造函数

知识点

1.对象的写法
2.Object.assign()合并对象
3.节点的增删改查
4.封装获取特定范围的随机数的函数
5.封装获取随机颜色的函数
6.在js中给节点设置样式和属性
7.原型对象,构造函数

效果