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

喜欢ヅ旅行 2022-07-15 04:51 175阅读 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>