new实例化绘制彩球

没有什么困难

已于 2022-04-19 11:23:30 修改

阅读量157

点赞数

文章标签： javascript

于 2022-04-19 11:15:10 首次发布

本文链接：https://blog.csdn.net/m0_67448414/article/details/124268954

版权

这篇博客介绍了如何使用JavaScript和CSS创建一个动态的气泡效果。通过定义Bull类，实现了随机生成不同大小、位置和颜色的气泡，并将它们添加到页面的指定容器中。博客内容涉及到JavaScript原型、随机数生成以及CSS样式应用等技术。

摘要由CSDN通过智能技术生成

css样式：

 #box {
        width: 1200px;
        height: 900px;
        margin: auto;
        position: relative;
        overflow: hidden;
        background-color: black;
    }
    
    #c {
        border-radius: 50%;
    }

<body>
    <div id="box">
        <!-- <div id="c" style="position: absolute;top:20px;left:20px;width: 20px;height: 20px;background-color: aliceblue;"></div> -->自己先写出来就容易明白
    </div>
    <script>
        function Bull(size, left, top) {
            this.size = size;
            this.left = left;
            this.top = top;

        }
        Bull.prototype.Bubbles = function() {
                let _size = this.RandomNum(10, 60);
                let _left = this.RandomNum(1, 1150);
                let _top = this.RandomNum(1, 890);
                let _bgc = this.RandomColor()
                var _html = '<div id="c" style="position: absolute;top:' + _top + 'px;left:' + _left + 'px;width: ' + _size + 'px;height: ' + _size + 'px;background-color: ' + _bgc + ';"></div>';
                return _html;
            }
            //随机颜色
        Bull.prototype.RandomColor = function() {
                var BgcColor = [" #f83600 ", "#FFF94C ", "#0072ff ", "#780206 ", "#7B920A ", "#dc2430 ", "#A83279 ", "#00bf8f ", "#FF512F ", "#485563 ", "#061700 ", "#02AAB0 "];
                return BgcColor[this.RandomNum(0, BgcColor.length - 1)];
            }
            //随机数值（这里就产生了一个问题？闭包：外面的作用域可以访问到RandomNum内部的局部变量，避免出现全局变量的污染和出现函数名冲突问题）
        Bull.prototype.RandomNum = function(max, min) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        var str = '';
        for (var i = 0; i <= 150; i++) {
            str += new Bull().Bubbles();
        }
        // var ball=new Bull();//把这个输出的球进行累加
        // var str = ball.Bubbles();//输出一个str(彩球)
       这两句是对str += new Bull().Bubbles();的解释
        document.querySelector('#box').innerHTML = str;
    </script>

</body>