<!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慢慢的向右滑,在這個定時器還沒結束的時候
點擊其他的按鈕,這樣就沖突了,
怎樣才能讓定時器運行的時候,點擊其他的定時器它不受影響
我這代碼實在是傳不上去，不太會用。html部分被屏蔽掉了。html部分改動的內容是為每個button添加一個class=“button”
