js多个小球的运动

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    *{
      margin: 0;padding: 0;
    }
    .box{
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    init(10);
    function init(num) {
      window.requestAnimationFrame = window.requestAnimationFrame||function (fn) {
       return setTime(fn,1000/60);
      };//兼容代码
      for (var i = 0; i<num;i++) {
        var oDiv = document.createElement("div");
            oDiv.className = "box";
            oDiv.tSpeed = 1+i;//小球的横向速度
            oDiv.lSpeed = 5+i;//小球的纵向速度
            oDiv.style.background = Color();
        document.body.appendChild(oDiv);
      }
      var OBox = document.querySelectorAll(".box");
      var winHeight = document.documentElement.clientHeight - OBox[0].clientHeight;
      var winWidth = document.documentElement.clientWidth - OBox[0].clientWidth;
      window.onresize = function (){
          winHeight = document.documentElement.clientHeight - OBox[0].clientHeight;
          winWidth = document.documentElement.clientWidth - OBox[0].clientWidth;
      };
      move();
      function move () {
        for (var i = 0; i<num;i++) {
          var oBox = OBox[i];//把每一个产生的box赋值给oBox
          var Left = oBox.offsetLeft;
          var Top = oBox.offsetTop;
          var moveLeft = Left + oBox.lSpeed;
          var moveTop = Top + oBox.tSpeed;
          if(moveLeft>=winWidth || moveLeft<=0){
            moveLeft = Math.min(moveLeft,winWidth);
            moveLeft = Math.max(moveLeft,0);
            oBox.lSpeed= -oBox.lSpeed;
            oBox.style.background = Color();

          };
          if(moveTop>=winHeight || moveTop<=0){
            moveTop = Math.min(moveTop,winHeight);
            moveTop = Math.max(moveTop,0);
            oBox.tSpeed = -oBox.tSpeed;
            oBox.style.background = Color();

          }
          oBox.style.left = moveLeft  + "px";
          oBox.style.top = moveTop  + "px";
        };
        requestAnimationFrame(move);
      };

      //随机颜色 二种写法
      /*var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "A", "B","C","D"];
      function Color(){
        var str = "#";
        for(var i=0;i<6;i++){
          str += arr[Math.floor(Math.random()*arr.length)]
        }
        return str;
      }*/
      
      //第二种写法
     function Color() {
          var r = Math.floor(Math.random()*256),
              g = Math.floor(Math.random()*256),
              b = Math.floor(Math.random()*256);
          return "rgb("+r+","+g+","+b+")";
      }
    }  
  </script>
  
</body>
</html>