飞舞的小球演示

html代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content {
            width:800px;
            height:600px;
            background: rgb(252, 220, 220);
        }
    </style>
</head>
<body>
<input type="button" value="弹出球" id="btn">
<div id="content">
</div>
<script>
    var content = document.getElementById('content');
    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 wh = Math.floor(Math.random() * 60) + 20;
        ball.style.width = wh + 'px';
        ball.style.height = wh + 'px';
        ball.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        content.appendChild(ball);
        var top = content.clientHeight/2 - ball.offsetHeight/2;
        var left = content.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 < content.offsetLeft || left > (content.offsetLeft + content.offsetWidth - ball.offsetWidth)) {
                x = -x;
            }
            if(top < content.offsetTop || top > (content.offsetTop + content.offsetHeight - ball.offsetHeight - 3)) {
                y = -y;
            }
            ball.style.left = left + "px";
            ball.style.top = top + "px";
        }, 50)
    }
</script>
</body>
</html>
html代码

效果展示

相关文章
