<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>
</body>
<script type="text/javascript">
var obtn=document.getElementById('btn');
var obox=document.getElementById('box');
var timer;
obtn.onclick=function(){
// timer=setInterval(function(){
// if(obox.style.left==800+'px'){
// clearInterval(timer)
// }else{
// obox.style.left=++n+'px';
// }
//
// },10)
//
// }
// timer=setInterval(function(){
// if(n>=800){
// clearInterval(timer)
// }else{
// obox.style.left=++n+'px';
// }
//
// },10)
//
// }
timer=setInterval(function(){
if(obox.offsetLeft>=800){
clearInterval(timer)
}else{
obox.style.left=obox.offsetLeft+5+'px';
}
},10)
}
</script>
</html>
网友评论