js面向对象之躁动的小球（）

最新推荐文章于 2021-05-27 05:27:48 发布

indd

最新推荐文章于 2021-05-27 05:27:48 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签：面向对象 javascript

本文链接：https://blog.csdn.net/osdfhv/article/details/53011646

版权

javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            body{
                background: darkmagenta;
            }
            #bg {
                position: relative;
                width: 1000px;
                height: 500px;
                margin: 40px auto;
                background: #000;
                cursor: pointer;
                border-radius:15px;
                opacity: 0.9;
    box-shadow:0 -10px 10px 0 red,10px 0 10px 0 yellow,0 10px 10px 0 green,-10px 0 10px 0 blue;

    -webkit-box-shadow:0 -10px 10px 0 red,10px 0 10px 0 yellow,0 10px 10px 0 green,-10px 0 10px 0 blue;
}

            .boll {
                position: absolute;
                border-radius: 50%;
                transition: all .1s;
            }
        </style>
    </head>

    <body>
        <div id="bg">
        </div>
    </body>
    <script type="text/javascript">
        //获取对象属性
        function getStyle(obj, attr) {
            if(obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }

        /*   var ball=document.getElementById("boll");
                 var bg=document.getElementById("bg");
                 var speedX=10;//定义速度
                 var speedY=5;
                 function  move(){  
                    if(ball.offsetLeft+ball.offsetWidth>bg.offsetWidth||ball.offsetLeft<0){
                        speedX*=-1;             
                    }
                    if(ball.offsetTop+ball.offsetHeight>bg.offsetHeight||ball.offsetTop<0){
                        speedY*=-1;             
                    }
                    ball.style.left=ball.offsetLeft+speedX+"px";
                    ball.style.top=ball.offsetTop+speedY+"px";
                    setTimeout("move()",20)
                 }
                 move();
          width height  background speedX   speedY  */
        function CreatBoll(left, top) {
            this.wh = returnRandom(10, 50);
            this.left = left; //||returnRandom(10,600);
            this.top = top; //||returnRandom(0,400);
            this.background = returnRandom(0, 999999);
            this.speedX = returnRandom(-5, 10);
            this.speedY = returnRandom(-5, 5);
            this.alpha = returnRandom(0, 1)
            this.div = document.createElement("div");
        }
        var bg = document.getElementById("bg");

        CreatBoll.prototype.paint = function() {
            this.div.style.width = this.wh + "px";
            this.div.style.height = this.wh + "px";
            this.div.style.left = this.left + "px";
            this.div.style.top = this.top + "px";
            this.div.style.background = "#" + this.background;
            this.div.className = "boll";
            bg.appendChild(this.div);
        }
        CreatBoll.prototype.move = function() {
                var my = this;
                window.setInterval(function() {
                    if(my.div.offsetLeft + my.div.offsetWidth > bg.offsetWidth || my.div.offsetLeft < 0) {
                        my.speedX *= -1;
                    }
                    if(my.div.offsetTop + my.div.offsetHeight > bg.offsetHeight || my.div.offsetTop < 0) {
                        my.speedY *= -1;
                    }
                    my.div.style.left = my.div.offsetLeft + my.speedX + "px";
                    my.div.style.top = my.div.offsetTop + my.speedY + "px";

                }, 60);

            }
            //随机数的产生
        function returnRandom(min, max) {
            return parseInt(Math.random() * (max - min) + min)
        }

        //监听一下鼠标的点击事件， 在点击处让小球以爆咋的形式散开        
        bg.onclick = function(ev) {
            var ev = ev || window.event;
            var mLeft = ev.clientX - this.offsetLeft;
            var mTop = ev.clientY - this.offsetTop;
            for(var i = 0; i < 20; i++) {
                var boll = new CreatBoll(mLeft, mTop);
                boll.paint();
                boll.move();

            }
        }



    </script>

</html>

indd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js面向对象之躁动的小球（）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0;
复制链接

扫一扫