js实现简单好玩的气泡 - - php中文网博客

首页 > 博客列表 > js实现简单好玩的气泡

博主信息

博文 20

粉丝 1

访问量 21239

专题推荐

更多>

代码开始前需要先知道的几个概念

clientHeight
只读属性，元素可见的高度，不包括边框。
clientWidth
只读属性，元素可见的宽度，不包括边框。
offsetHeight
是一个只读属性，返回元素的像素高度，包含该元素的垂直内边距和边框。
offsetWidth
是一个只读属性，返回元素的像素宽度，包含该元素的水平内边距和边框。
offsetLeft
是一个只读属性，返回当前元素相对于父元素节点的左边界偏移的像素值。
offsetTop
只读属性，返回当前元素相对于其父元素的顶部的距离。

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .btn {
                text-align: center;
            }
            #dv {
                width: 800px;
                height: 600px;
                background: #eaeaea;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="btn">
            <input type="button" value="弹出球" id="btn">
            <input type="button" id="stopqiu" value="暂停" />
        </div>
        <div id="dv">
        </div>
        <script>
            var dv = document.getElementById('dv');
            var colors = ['red', 'yellow', 'blue', 'green', 'pink', 'orange', 'purple', 'brown','black'];
            var timer;
            document.getElementById('stopqiu').onclick = function() {
                for (var i = 0; i < timer; i++) {
                    clearInterval(i + 1)
                    console.log(timer)
                }
            }
            document.getElementById('btn').onclick = function() {
                var ball = document.createElement('div');
                ball.style.cssText = "position:absolute;border-radius:50%;";
                var wh = Math.floor(Math.random() * 50) + 30; //向下取整，随机生成宽高度
                ball.style.width = wh + 'px';
                ball.style.height = wh + 'px';
                ball.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; //随机生成颜色
                dv.appendChild(ball);
                var dvofsetleft = dv.offsetLeft;
                var top = dv.clientHeight / 2 - ball.offsetHeight / 2;
                var left = dv.clientWidth / 2 - ball.offsetWidth / 2 + dvofsetleft;
                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;
                timer = setInterval(function() {
                    left += x;
                    top += y;
                    if (left < dv.offsetLeft || left > (dvofsetleft + dv.offsetWidth - ball.offsetWidth)) {
                        x = -x;
                    }
                    if (top < dv.offsetTop || top > (dv.offsetTop + dv.offsetHeight - ball.offsetHeight)) {
                        y = -y;
                    }
                    ball.style.left = left + "px";
                    ball.style.top = top + "px";
                }, 30)
                console.log(dv.childNodes)
                console.log(timer + "--------");
            }
        </script>
    </body>
</html>

效果图

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端基础，表单、表格

2021-11-11 15:40:10