SOURCE

var btn1 = document.getElementById("btn1");
			var btn2 = document.getElementById("btn2");
			var ball = document.getElementById("ball");
			var timer;
			x = y = 0;xspeed = yspeed = 2;
			duration = 20; //移动间隔时间
			width = height = 100;
			btn1.onclick = function() {
				if(timer) { //清除定时器
					return;
				}
				timer = setInterval(function() {
					x += xspeed;
					y += yspeed;
					if(y >= document.documentElement.clientHeight - height) {
						//如果Y大于等于文档高度减去自身高度,Y就等于她
						y = document.documentElement.clientHeight - height;
						//小球反方向运动
						yspeed = -yspeed;
					}
					if(y <= 0) {
						y = 0;
						yspeed = -yspeed;
					}
					if(x >= document.documentElement.clientWidth - width) {
						//如果X大于等于文档宽度减去自身宽度,X就等于她
						x = document.documentElement.clientWidth - width;
						//小球反方向运动
						xspeed = -xspeed;
					}
					if(x <= 0) {
						x = 0;
						xspeed = -xspeed;
					}
					//console.log(y);
					ball.style.left = x + "px";
					ball.style.top = y + "px";
				}, duration)
			}
			btn2.onclick = function() {
				clearInterval(timer);
				timer = null;
			}

        <button id="btn1">开始</button>
		<button id="btn2">停止</button>
		<div id="ball"></div>

#ball {
				width: 100px;
				height: 100px;
				background-color: red;
				border-radius: 70%;
				position: absolute;
			}