原生js弹力球

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 1200px;
        }       
    </style>
</head>
<body>
</body>

</html>
<script>
    // 面向对象的思想：
    //1、有哪些类：就只有一个弹力球类。
    //2、步骤
    // 定义类（弹力球类）：构造函数
    function Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace) {

        // 属性:(把面向过程中的全局变量变成属性)
        this.dom = null;
        //球球的大小
        this.size = size;
        // 位置
        this.left1 = left1;
        this.top1 = top1;
        //颜色
        this.color = color;
        // 步长
        this.step = step;
        this.timeSpace = timeSpace;
        // 方向
        this.directionLeft = directionLeft;
        this.directionTop = directionTop;

        // 创建dom
        this.createDom = function(){
            this.dom = document.createElement("div");
            this.dom.style.cssText = `
                position: absolute;
                left: ${this.left1}px;
                top: ${this.top1}px;
                width: ${this.size}px;
                height: ${this.size}px;
                border-radius: 50%;
                background-color:${this.color};
            `;
            document.body.appendChild(this.dom);
        }

        // 球球开始谈
        this.go = function () {
            setInterval(() => {
                this.left1 = this.left1 + this.directionLeft * this.step;
                this.top1 = this.top1 + this.directionTop * this.step;

                // 边界判断
                // 1)、纵向
                let clientHeigth = document.documentElement.clientHeight || document.body.clientHeight;
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                if (this.top1 + this.size > clientHeigth + scrollTop) {
                    // 下边界
                    this.top1 = clientHeigth + scrollTop - this.size;
                    this.directionTop = -1;
                } else if (this.top1 < scrollTop) {
                    //上边界
                    this.top1 = scrollTop;
                    this.directionTop = 1;
                }
                //2)、横向
                let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
                let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                if (this.left1 + this.size > clientWidth + scrollLeft) {
                    // 右边界
                    this.left1 = clientWidth + scrollLeft - this.size;
                    this.directionLeft = -1;
                } else if (this.left1 < scrollLeft) {
                    //左边界
                    this.left1 = scrollLeft;
                    this.directionLeft = 1;
                }

                this.dom.style.left = this.left1 + "px";
                this.dom.style.top = this.top1 + "px";
            }, this.timeSpace);
        }

        this.createDom();
        this.go();
    }


    window.onload = function () {
        for(var i=0;i<200;i++){
            // 1、随机大小(10-100)
            let size = parseInt(Math.random()*91)+10;
            // 2、随机位置；(横向：10-1000，纵向：10-600)
            let left1 = parseInt(Math.random()*991)+10;
            let top1 = parseInt(Math.random()*591)+10;
            // 3、随机颜色
            let color = getColor();
            // 4、随机步长(1-10)
            let step = parseInt(Math.random()*11)+1;
            // 5、随机方向
            let directionLeft = parseInt(Math.random()*2)==0?-1:1;  //0和1
            let directionTop = parseInt(Math.random()*2)==0?-1:1;  //0和1
            // 6、随机时间间隔(5-100)
            let timeSpace = parseInt(Math.random()*96)+5;
            let b1 = new Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace); 
        }
    }

    function getColor(){
        var str = "#";
        for(var i=0;i<6;i++){
            str += parseInt(Math.random()*16).toString(16);
        }
        return str;
    }

</script>

 

posted @ 2020-04-11 21:20  敲烂键盘的大侠  阅读(231)  评论(0)    收藏  举报