飞舞的气泡 - - php.cn博客

照猫画虎做了几遍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞舞的气泡</title>
    <style >
             #dhk{
            background: lightgrey;
            width: 600px;
            height: 600px;
            box-shadow: 0px 5px 5px 3px gray;
        }
        #btn{
            width: 70px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="dhk"></div>
    <input type="button" value="点一点" id="btn">
    <script >
        var dhk = document.getElementById("dhk");
        var colors=['red', 'yellow', 'blue', 'green', 'yellowgreen', '#FF00FF'];
        document.getElementById('btn').onclick=function(){
            var ball = document.createElement('div');
            ball.style.cssText="position:absolute;border-radius:50%;box-shadow: 0px 3px 5px #666";
            var kg = Math.floor(Math.random()*70)+30;
            ball.style.width=kg+'px';
            ball.style.height= kg+'px';
            ball.style.backgroundColor=colors[Math.floor(Math.random()*colors.length)];
            dhk.appendChild(ball);
            var top = dhk.clientHeight/2 - ball.offsetHeight/2;
            var left = dhk.clientWidth/2 - ball.offsetWidth/2;
            ball.style.left=left+"px";
            ball.style.top=top+"px";
            var x=Math.floor(Math.random()*10)+1;
            var y=Math.floor(Math.random()*10)+1;
            setInterval(function() {
                left+=x;
                top+=y;
            if(left < dhk.offsetLeft || left > (dhk.offsetLeft+dhk.offsetWidth-ball.offsetWidth)) {
                x = -x;
            }
            if(top < dhk.offsetTop || top > (dhk.offsetTop+dhk.offsetHeight-ball.offsetHeight-3)) {
                y = -y;
            }
            ball.style.left=left+"px";
            ball.style.top=top+"px";
            }, 40);
        }
    </script>
</body>
</html>