为什么在移动中点击按钮会加快呢?

红色块在移动中再频繁点击按钮 红色块会加快..是什么原因啊..
要怎么解决啊?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* { margin:0; padding:0;}
ul,li {list-style-type:none; }
#div1 {background: red; position:absolute; left:50px; top:50px; width:200px; height:200px;}
</style>
</head>
<body>
<div id="div1"></div>
<input id="btn_start_move" type="button" value="开始运动" /> 
<script type="text/javascript">
var t;
function moveElem(){
var move = document.getElementById("div1");
var Speed =5;



if(move.offsetLeft >= 400){
clearTimeout(t);
}
else{
move.style.left = move.offsetLeft + Speed + "px";
}
t = setTimeout("moveElem()",30);
}
function moveBt(){
var cli = document.getElementById("btn_start_move");
cli.onclick = moveElem;
}
 moveBt();
</script></body>
</html>

解决方案 »

  1.   

    多次调用了
    var move = document.getElementById("div1");
                    var Speed =5;
                    
                    
                    
                    if(move.offsetLeft >= 400){
                            clearTimeout(t);
                    }
                    else{
                            move.style.left = move.offsetLeft + Speed + "px";
                    }
                    t = setTimeout("moveElem()",30);修改一下：
    var move ；
    var cli ；
     var t;  window.onload=function (){
                    cli = document.getElementById("btn_start_move");
    move== document.getElementById("div1");
                    cli.onclick =function(){
     if(cli.value=="开始运动"){
    cli.value="停止运动";
     moveElem();
    }else{
    cli.value="开始运动";
    clearTimeout(t);
    }};
               };