基于html+js实现随机生成图形（面向对象、继承写法）

使用html和js实现的一个简单小练习随机生成图形，大概功能主要是：

点击哪个图形的按钮，可以不停的生成大小随机的该图形。该代码是面向对象的写法，主要用到的是继承，每一个小图形类都是继承的图形大类。详细的解释和代码步骤我都注释在下面的代码中的，请君一阅。

【注：仅作自己查看和分享学习之用】

【效果图如下】

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机生成图形</title>
</head>

<body>
    <input type="button" value="长方形">
    <input type="button" value="正方形">
    <input type="button" value="三角形">
    <input type="button" value="圆形">
    <script src="./tuxing.js"></script>
</body>

</html>

let btn = document.getElementsByTagName("input");
//图形类
class Graph {
    constructor({ left, top, bgColor }) {
        this.left = left;
        this.top = top;
        this.bgColor = bgColor;
        this.node = document.createElement("div");
    }
    setPosition() {
        this.node.style.cssText += `
            position:absolute;
            left:${this.left}px;
            top:${this.top}px;
        `;
    }
    setBgColor() {
        this.node.style.backgroundColor = `${this.bgColor}`;
    }
    setSize(height = this.height, width = this.width) {
        this.node.style.cssText += `
            height: ${height}px;
            width: ${width}px;
        `;
    }
}
//三角形
class Triangle extends Graph {
    constructor(obj, height, bottom) {
        super(obj);
        this.height = height;
        this.bottom = bottom;
        this.render();
    }
    render() {
        this.setPosition();
        this.setSize(0, 0);
        this.node.style.cssText += `
            border-bottom: ${this.bgColor} ${this.bottom}px solid;
            border-left: transparent ${this.height / 2}px solid;
            border-right: transparent ${this.height / 2}px solid;
        `;
        document.body.appendChild(this.node);
    }
}
//圆形
class Circle extends Graph {
    constructor(obj, r) {
        super(obj);
        this.r = r;
        this.render();
    }
    render() {
        this.setPosition();
        this.setBgColor();
        this.setSize(this.r, this.r);
        this.node.style.cssText += `
            border-radius:50%;
        `;
        document.body.appendChild(this.node);
    }
}
//长方形
class Rectangle extends Graph {
    constructor(obj, height, width) {
        super(obj);
        this.height = height;
        this.width = width;
        this.render();
    }
    render() {
        this.setPosition();
        this.setBgColor();
        this.setSize();
        document.body.appendChild(this.node);
    }
}
//正方形
class Square extends Rectangle {
    constructor(obj, length) {
        super(obj, length, length);
        this.render();
    }
}

let obj, w, h, b;
function objCreate() {
    w = getRandom(20, 300);
    h = getRandom(20, 300);
    b = getRandom(20, 300);
    obj = {
        left: getRandom(0, window.innerWidth - w),
        top: getRandom(0, window.innerHeight - h),
        bgColor: `rgba(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 10) / 10})`,
    }
}
objCreate();

btn[0].addEventListener("click", function (event) {
    new Rectangle(obj, h, w);
    objCreate();
});
btn[1].addEventListener("click", function (event) {
    obj.top = getRandom(0, window.innerHeight - w);
    new Square(obj, w, w);
    objCreate();
});
btn[2].addEventListener("click", function (event) {
    obj.left = getRandom(0, window.innerWidth - h);
    obj.top = getRandom(0, window.innerHeight - b);
    new Triangle(obj, h, b);
    objCreate();
});
btn[3].addEventListener("click", function (event) {
    obj.top = getRandom(0, window.innerHeight - w);
    new Circle(obj, w);
    objCreate();
});


//获取随机数
function getRandom(min, max = 0) {
    if (min > max) {
        [min, max] = [max, min];
    }
    return parseInt(Math.random() * (max - min + 1)) + min;
}

基于html+js实现随机生成图形（面向对象、继承写法）

猜你喜欢