前端学习笔记之用面向对象实现点击按钮生成随机图形
学习了面向对象感觉这个还比较好玩，于是分享出来和大家交流一下！
以下是完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="buttoned">
<input type="button" class="triangle" value="创造三角形">
<input type="button" class="circle" value="创造圆形">
<input type="button" class="rectangle" value="创造矩形">
<input type="button" class="square" value="创造正方形">
<input type="button" class="start" value="开始">
</div>
<script>
class Graph {
constructor(left, top, color) {
this.left = left;
this.top = top;
this.color = color;
this.node = null;
}
setPosition({ left, top }) {
Object.assign(this, { left, top });
}
getPosition() { }
setColor(String) { }
getColor() { }
setSize() { }
getSize() { }
}
class Triangle extends Graph {
constructor(left, top, color, height, bottom) {
super(left, top, color);
this.height = height;
this.bottom = bottom;
this.init();
}
init() {
this.render();
}
render() {
this.node = document.createElement("div");
document.body.appendChild(this.node);
Object.assign(this.node.style, {
left: this.left + "px",
top: this.top + "px",
position: "absolute",
borderLeft: this.bottom / 2 + "px" + " solid rgba(0,0,0,0)",
borderRight: this.bottom / 2 + "px" + " solid rgba(0,0,0,0)",
borderBottom: this.height + "px" + " solid " + this.color
});
}
}
class Circle extends Graph {
constructor(left, top, color, radius) {
super(left, top, color);
this.radius = radius;
this.init();
}
init() {
this.render();
}
render() {
this.node = document.createElement("div");
document.body.appendChild(this.node);
Object.assign(this.node.style, {
left: this.left + "px",
top: this.top + "px",
position: "absolute",
width: this.radius * 2 + "px",
height: this.radius * 2 + "px",
backgroundColor: this.color,
borderRadius: this.radius + "px"
});
console.log(this);
}
}
class Rectangle extends Graph {
constructor(left, top, color, height, width) {
super(left, top, color);
this.height = height;
this.width = width;
this.init();
}
init() {
this.render();
}
render() {
this.node = document.createElement("div");
document.body.appendChild(this.node);
Object.assign(this.node.style, {
left: this.left + "px",
top: this.top + "px",
position: "absolute",
width: this.width + "px",
height: this.height + "px",
backgroundColor: this.color,
});
}
}
class Square extends Rectangle {
constructor(left, top, color, length) {
super(left, top, color);
this.length = length;
this.init();
}
init() {
this.render();
}
render() {
this.node = document.createElement("div");
document.body.appendChild(this.node);
Object.assign(this.node.style, {
left: this.left + "px",
top: this.top + "px",
position: "absolute",
width: this.length + "px",
height: this.length + "px",
backgroundColor: this.color,
});
}
}
// const tri1 = new Triangle(100, 100, "red", 100, 100);
// const cir1 = new Circle(200, 200, "blue", 50, 50);
// const rec1 = new Rectangle(300, 300, "green", 100, 60);
// const squ1 = new Square(400, 400, "yellow", 200);
let i = 99;
let size = 1;
function stop() {
clearTimeout(t)
}
let t;
function lucency() {
new Circle(random(0, innerHeight), random(0, innerWidth), `rgba(${random(0, 255)},${random(0, 255)},${random(0, 255)},${i / 99})`, size);
i--;
size++;
if (i > 0) {
t = setTimeout("lucency()", 35);
} else {
buttons[4].value = "开始";
alert("透明度已经到0，程序停止运行");
size = 1;
}
}
let buttoned = document.querySelector(".buttoned");
let buttons = document.querySelectorAll("input");
document.addEventListener("click", function (event) {
const tar = event.target;
if (tar.type === "button") {
let [left, top, color] = [random(0, innerWidth), random(0, innerHeight), `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`]
switch (tar.className) {
case "triangle":
new Triangle(left, top, color, random(1, 100), random(1, 100));
break;
case "circle":
new Circle(left, top, color, random(1, 50), random(1, 50));
break;
case "rectangle":
new Rectangle(left, top, color, random(1, 100), random(1, 100));
break;
case "square":
new Square(left, top, color, random(1, 200));
break;
case "start":
lucency()
buttons[4].value = "停止";
break;
case "stop":
lucency()
buttons[4].value = "开始";
size = 1;
stop()
i = 99;
break;
}
}
})
function random(min, max) {
return parseInt(Math.random() * (max - min)) + min;
}
</script>
</body>
</html>
