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 (