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

本文通过一个实际的JavaScript代码示例,展示了如何通过鼠标点击事件在页面上动态生成随机大小、颜色和圆角的div元素。首先介绍了面向过程的实现方式,接着将函数转换为面向对象的方法,并最终通过原型对象来组织代码,提高了代码的复用性和可维护性。文章深入浅出地解释了各个编程概念,并提供了完整的工作代码示例,有助于读者理解和掌握JavaScript中的面向过程、面向对象和原型对象编程思想。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求

通过鼠标点击事件向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.原型对象,构造函数

效果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值