<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
.box2{width: 200px; height: 200px; background:red; border-radius:50%; position: relative;}
</style>
</head>
<body>
<button type="" id="start">开始</button>
<button type="" id=stop>停止</button>
<div id="box" class="box2"> </div>
<script type="text/javascript">
//声明页面的宽高和投票、left
var lr=800;
var tb=300;
var i=0;
var j=0;
//获取id
var box=document.getElementById("box");
var start=document.getElementById("start");
var stop=document.getElementById("stop");
//点击开始按钮消失，停止按钮显示
start.onclick=function(){
start.style.display='none';
stop.style.display='inline';
//setInterval循环函数
var time=setInterval(function(){
//赋值left、top
box.style.left=i+'px';
box.style.top=j+'px';
//当left大于宽度时 left--
if(i>lr){
lr=0;
i--;
}
//当left小于等于宽度时 left++
if(i<=lr){
lr=800;
i++;
}
//当top大于宽度时 top--
if(j>tb){
tb=0;
j--;
}
//当left小于等于宽度时 left++
if(j<=tb){
tb=300;
j++;
}
//停止按钮函数
stop.onclick=function(){
//clearInterval停止setInterval循环
clearInterval(time);
//修改按钮显示隐藏
stop.style.display='none';
start.style.display='inline';
}
},5);//1000毫秒=1秒 内容运动一次时间
}
</script>
</body>
</html>