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