<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速运动案例</title>
<style type="text/css">
#box{
position: relative;/*相对定位指相对自己原先的位置*/
width: 50px;
height: 50px;
top: 200px;
background-color: #A9A9A9;
}
</style>
</head>
<body>
<button id="btn">运动</button>
<div id="box">
</div>
</body>
<script type="text/javascript">
var btn=document.getElementById("btn");
var box=document.getElementById('box');
var count=0;
var inter=null;
btn.onclick=function (ev) {
inter=setInterval(function () {
count++;
box.style.left=count+'px';
if(count>1000){
clearInterval(inter);
box.style.display='none';
}
},10)
}
</script>
</html>
