原生js实现小球在屏幕上自由移动，当遇到屏幕边缘时反弹

小球在桌面上自由移动，要清楚的几个问题
1、小球在桌面移动的最大距离是多少
2、小球移动的步长是多少
3、当小球碰到屏幕边缘时怎么实现反弹
4、 如何实现多个小球
5、怎么实现小球的颜色及大小

关于第一步实现小球在桌面上移动的最大距离的思路
1、首先要获取桌面的宽度与高度，注意获取屏幕的宽度与高度需要封装一下，如下所示
宽：document.documentElement.clientWidth || document.body.clientWidth;
高：document.documentElement.clientHeight || document.body.clientHeight;
2、其次再获取小球的宽与高，
3、二者相减就是小球移动的最大距离

关于第二步实现小球移动的步长的思路
需要设置两个步长 ，一个水平方向的步长 ，一个垂直方向的步长 ，这样方便实现第6个问题的反弹

关于第三步实现当小球碰到屏幕边缘时需要反弹的思路
当小球碰到屏幕边缘时需要反弹， 我们知道在水平方向上移动元素时，向右是**+，向左是—** ， 垂直方向上向下是**+， 向上是—** ， 所以可以看出两个方向正好相反，利用将步长取反就可以实现

关于第四步实现多个小球的思路
可以肯定的是不能将小球写成具体的数字，要动态的添加小球，因为当要添加几十个的时候只需修改数字就好，方便更改，所以需要利用document.createElement(元素)和appendChild() 来实现，

关于第步实现颜色及大小的思路
1、 对于大小，需要创建一个数组，对于颜色，利用rgbq来取值，颜色与大小都是用随机数取值，
2、需要注意当小球的大小改变时，小球在窗口内可运动的最大距离也会改变，所以需要再更改窗口的最大距离

效果图 (视频加载，有点慢，可能需要等一下~ )