JS面向对象——打印正方形、圆形

最新推荐文章于 2022-11-26 14:56:53 发布

SSSkyCong

最新推荐文章于 2022-11-26 14:56:53 发布

阅读量1.1k

点赞数

分类专栏： Js H5 学习-总结-转载

本文链接：https://blog.csdn.net/qlwangcong518/article/details/86031998

版权

学习-总结-转载同时被 3 个专栏收录

136 篇文章 0 订阅

订阅专栏

127 篇文章 2 订阅

订阅专栏

111 篇文章 1 订阅

订阅专栏

描述：

JS面向对象——打印正方形、圆形

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
    *
    *   class
    *   constructor
    *   extends
    *   super();
    *   super.方法
    *   static 方法
    *
    *
    * */

    //类名
    class Box{
//            构造函数
        constructor(_parent,_wh,_color){
            this.wh=_wh;
            this.color=_color;
            this.boxElem=this.createBox(_parent);
        }
        createBox(_parent){
            if(this.boxElem)return;
            let div=document.createElement("div");
            div.style.width=div.style.height=this.wh+"px";
            div.style.backgroundColor=this.color;
            div.style.position="absolute";
            _parent.appendChild(div);
            return div;
        }
        move(x,y){
            this.boxElem.style.left=x+"px";
            this.boxElem.style.top=y+"px";
        }
    }


    class Ball extends Box{
        constructor(_parent,_wh,_color){
//                super()就是执行继承的父类的构造函数
            super(_parent,_wh,_color)
        }
        createBox(_parent){//相当于重写 加了相应的功能 圆的功能
            let elem=super.createBox(_parent);
            elem.style.borderRadius=this.wh/2+"px";
            return elem;
        }
//        类的静态方法
        static getRandomColor(){
            let col="#";
            for(let i=0;i<6;i++){
                col+=Math.floor(Math.random()*16);
            }
            return col;
        }
    }

    let box1=new Box(document.body,50,"red");
    box1.move(200,200);
    let ball1=new Ball(document.body,50);
    ball1.move(500,500);

    Ball.getRandomColor();
</script>
</body>
</html>