纯JS写一个win屏幕保护_奔跑的小球

   .ball {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, #fff, #fff600);
            border-radius: 50%;
        }

 // 创建[1,11）个小球
        var mdAttr = document.createDocumentFragment();
        var OBall = [];//小球对象数组
        for (var i = 0; i < random(5,20); i++) {
            OBall[i] = document.createElement("div");
            OBall[i].setAttribute("class", "ball");
            var cirR = random(80,100);//小球半径
            OBall[i].style.width = cirR * 2 + "px";
            OBall[i].style.height = cirR * 2 + "px";
            OBall[i].style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
            mdAttr.appendChild(OBall[i]);
            OBall[i].startX = random(1,10);//初始位置X  可以自己设置位置，不一定是非要从左上角
            OBall[i].startY = random(1,10);//初始位置Y  
            OBall[i].Vx = random(3,10);//水平增加距离    这个速度是随机增加的，不然没有随机的效果
            OBall[i].Vy = random(3,10);//垂直增加距离
        }
        document.body.appendChild(mdAttr);

        //获取浏览器窗口宽高
        var W,H;
        window.onresize = (function(){
            W = window.innerWidth,
            H = window.innerHeight;
        })();


        //运动  ~ ! void +  a=  (function fn())
         ~ function fn() {
            OBall.forEach(function (ball) {
                var MaxH = H - ball.offsetHeight,//获取小球位置的最大值，以免超过边界
                    MaxW = W - ball.offsetWidth;
                ball.startX += ball.Vx;//改变小球位置
                ball.startY += ball.Vy;
                if(ball.startX >= MaxW || ball.startX <=0){//若小球位置超出最大值和最小值就改变方向
                    ball.Vx *= -1;
                    ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
                    ball.startX = Math.max(0,ball.startX);
                    ball.startX = Math.min(ball.startX,MaxW);
                }
                if(ball.startY >= MaxH || ball.startY <=0){
                    ball.Vy *= -1;
                    ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
                    ball.startY = Math.max(0,ball.startY);
                    ball.startY = Math.min(ball.startY,MaxW);
                }
                ball.style.left = ball.startX + "px";//设置小球当前位置
                ball.style.top = ball.startY + "px";
            });
            requestAnimationFrame(fn);//循环
        }();

        //颜色随机
        function randomColor() {
            var r = Math.floor(Math.random() * 256),
                g = Math.floor(Math.random() * 256),
                b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
        //取[min,max）之间的随机值
        function random(min,max){
            return Math.random(max-min)+min;
        }