js实现无色彩球

面向对象化矩形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div ></div>
<script>
    function  Rect(options) {
        this._init(options);
    }
    Rect.prototype={
        //属性
        _init:function (options) {
            //父标签
            this.parentId=options.parentId;
            //位置
            this.left=options.left||100;
            this.top=options.top||100;
            //自身的属性
            this.width=options.width||100;
            this.height=options.height||50;
            this.bgColor=options.bgColor||'#000';
            this.borderRadius=options.borderRadius||0;
            this.border=options.border||'none';
        },
        //行为
        render:function () {
            //1.获取父标签
            var parentEle=document.getElementById(this.parentId);
            //2.创建矩形标签
            var reactEle=document.createElement('div');
            parentEle.appendChild(reactEle);

            reactEle.style.position='absolute';
            reactEle.style.left=this.left+'px';
            reactEle.style.top=this.top+'px';

            reactEle.style.width=this.width+'px';
            reactEle.style.height=this.height+'px';

            reactEle.style.backgroundColor=this.bgColor;
            reactEle.style.border=this.border;
            reactEle.style.borderRadius=this.borderRadius+'px';
        }
    }

    //创建矩形对象
    var rect=new Rect({
        parentId:'main',
        left:200,
        top:200,
        500,
        height:300,
        bgColor:'pink',
        borderRadius:20,
        border:'10px solid #000'
    });

   rect.render();
</script>
</body>
</html>

　　面向对象实现无色彩球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
            list-style: none;
        }
        html,body,div{
             100%;
            height:100%;
        }
        #box{
            backgroud-colore:#000;
            position:  relative;
        }
    </style>
</head>
<body>
<div >

</div>
<script src="五彩特效/js/Underscore-min.js"></script>
<script src="五彩特效/js/Ball.js"></script>
<script>
    //1.获取父标签
    var box=document.getElementById('box');
    var ball=new Ball({
       parentId:'box',
        left:100,
        top:200,
        bgColor:'green'
    });

    ball.render();
</script>
</body>
</html>

function Ball(options){
   this._init(options);
}
Ball.prototype={
   _init:function (options) {
       //1.必要属性
       this.parentId=options.parentId;
       this.left=options.left;
       this.top=options.top;
       this.r=60;
       this.bgColor=options.bgColor||'red';

       //2.小球变化的量
       this.dX=_.random(-5,5);
       this.dY=_.random(-5,5);
       this.dR=_.random(1,3);//半径
   },
   //行为
    render:function () {
        var parentNode=document.getElementById(this.parentId);
        var childNode=document.createElement('div');
        parentNode.appendChild(childNode);

        childNode.style.position='absolute';
        childNode.style.left=this.left+'px';
        childNode.style.top=this.top+'px';
        childNode.style.width=this.r+'px';
        childNode.style.height=this.r+'px';
        childNode.style.borderRadius='50%';
        childNode.style.backgroundColor=this.bgColor;
    },

    update:function () {
        this.left+=this.dX;
        this.top+=this.dY;
        this.r-=this.dR;
        //判断
        if(this.r<=0){
            this.r=0;
            //把小球移除
            ballArr=_.without(ballArr,this);
        }
    }
};

<!--关于创建出来的对象类型获取-->
<script type="text/html">
    var obj={'name':'张三'};

//    console.log(typeof obj);//object
//    console.log(obj.toString());//[object Object]
    console.log(obj.constructor.name);//object

    var arr=[1,2,3];
//    console.log(arr);
//    console.log(typeof arr);//object
//    console.log(arr.toString());//1,2,3
//    console.log(arr.constructor);//ƒ Array() { [native code] }
//    console.log(arr.constructor.name);//Array
    //call 借调
    Object.prototype.toString().call(arr);
    console.log(arr);


    var date=new Date();
//    console.log(date);//Sat Apr 25 2020 21:25:11 GMT+0800 (中国标准时间)
//    console.log(typeof date); //object
//    console.log(date.constructor.name);  //Date
    Object.prototype.toString().call(date);

</script>

js实现无色彩球

相关推荐