原生js生成的10个圆，随机位置、随机大小、随机背景颜色；

使用到的功能点有，随机位置、随机大小、随机背景颜色、创建元素、定时

器！

布局：

<div class="wrap"></div>

样式：

* {

        padding: 0;

        margin: 0;

      }

      div .wrap {

        position: relative;

      }

      .wrap div {

        position: absolute;

        border-radius: 50%;

      }

js逻辑代码：

// 创建元素

      var mybox = document.getElementsByClassName("wrap")[0];

      var num = 0;

      // 设置定时器

      var time = setInterval(creatball, 800);

      // 创建小球函数

      function creatball() {

        // 创建元素

        var mydiv = document.createElement("div");

        var wh = random(200, 5);

        num++;

        // 设置宽高

        mydiv.style.width = wh + "px";

        mydiv.style.height = wh + "px";

        // 设置元素背景颜色

        mydiv.style.background = rancolr();

        // 随机位置

        mydiv.style.left = random(0, window.innerWidth - wh) +

"px";

        mydiv.style.top = random(0, window.innerHeight - wh) +

"px";

        mybox.appendChild(mydiv);

        if (num >= 10) {

          clearInterval(time);

        }

      }

      // 随机颜色

      function rancolr() {

        var r = parseInt(Math.random() * 256);

        var g = parseInt(Math.random() * 256);

        var b = parseInt(Math.random() * 256);

        var rgb = "rgb(" + r + "," + g + "," + b + ")";

        return rgb;

      }

      // 随机数

      function random(max, min) {

        return parseInt(Math.random() * (max - min + 1) + min);

      }