<!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;
}
#box1{
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position: absolute;
top:140px;
}
#box2{
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
position: absolute;
top:240px;
}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>
<div id="box1"></div>
<div id="box2"></div>
</body>
<script type="text/javascript">
//封装函数的思路
//1 提取相同的代码，被函数包裹
//2提取相同的变量（元素）。用形参代替
//3改错
var obtn=document.getElementById('btn');
var obox=document.getElementById('box');
var obox1=document.getElementById('box1');
var obox2=document.getElementById('box2');
var timer;
var timer1;
var timer2;
obtn.onclick=function(){
move(timer,obox)
move(timer1,obox1)
move(timer2,obox2)
}
function move(time,obj){
time=setInterval(function(){
if(obj.offsetLeft>=1800){
clearInterval(time)
}else{
obj.style.left=obj.offsetLeft+5+'px';
}
},10)
}
</script>
</html>
网友评论