飞翔的小球，小球自由移动

html:
<div id="ball"></div>
css:
 #ball{
            width:150px;
            height:150px;
            background:green;
            border-radius:50%;
            position:absolute;
            transition:background-color 0.3s ease;
}
js:
/**
 * Created by SlzStar on 2017/8/11.
 */
window.onload = function () {
    /*
     1.首先让小球自动每一秒向前走几步
     */
//先获取小球；
 var ball = document.getElementById("ball");
    var stepX = 3;
    var stepY = 3;
    setInterval(function(){
        var l = ball.offsetLeft;
        var t = ball.offsetTop;
        var newLeft = l + stepX;
        var newTop = t+stepY;
        //找到右边最大的临界点；
        var maxLeft = document.documentElement.clientWidth - ball.offsetWidth;
        var maxTop = document.documentElement.clientHeight - ball.offsetHeight;
        if(newLeft>=maxLeft){
            stepX *= -1;
            bg(ball);
        }
        if(newLeft<=0){
            stepX *= -1;
            bg(ball);
        }
        if(newTop>=maxTop){
            stepY *= -1;
            bg(ball);
        }
        if(newTop<=0){
            stepY *= -1;
            bg(ball);
        }
        ball.style.left = newLeft + "px";
        ball.style.top = newTop + "px";
    },20)


    //颜色的函数；
    function bg(obj){
        obj.style.background = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
    }
    function rand(n,m){
        return num = Math.floor(Math.random()*(m-n+1))+n;
    }


}