<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#A{height:120px; width:1000px; background:#ccc; position:relative; left:0; top:0; margin:auto; margin-top:50px;}
#B{height:100px; width:100px; background:red; position:absolute; left:0; top:20px;}
input{width:50px; height:40px; margin-right:20px;}
.ma{width:400px; margin:auto; margin-top:50px;}
</style>
<body>
<div id="A">
<div id="B" style="left:0px;"></div>
</div>
<div class="ma">
<input value="到达0" type="button" onclick="show(0)"/>
<input value="到达300" type="button" onclick="show(1)"/>
<input value="到达600" type="button" onclick="show(2)"/>
<input value="到达900" type="button" onclick="show(3)"/>
</div>
</body>
<script>
var tt=document.getElementById('B').style.left;
var timer=null;
function right(jc){
tt=parseInt(tt)+30;
if(tt>=(jc*300)){
tt=(jc*300);
window.clearInterval(timer);
}
document.getElementById('B').style.left=tt+'px';
}
function left(jc){
tt=parseInt(tt)-30;
if(tt<=(jc*300)){
tt=(jc*300);
window.clearInterval(timer);
}
document.getElementById('B').style.left=tt+'px';
}
function show(jc){
if(parseInt(tt)<(jc*300)){
timer=window.setInterval(function (){right(jc)},30);
}else if(parseInt(tt)>(jc*300)) {
timer = window.setInterval(function () {left(jc)}, 30);
}
}
</script>
</html>
点击"到达900",定时器开始运行,盒子B慢慢的向右滑,在这个定时器还没结束的时候
点击其他的按钮,这样就冲突了,
怎样才能让定时器运行的时候,点击其他的定时器它不受影响
