js运动基础1

1.在这个例子里面，如果在div块运动的过程中继续点击按钮的话，速度会越来越快，所以再开另一个定时器的时候要把之前的定时器给关掉。这里timer定义的位置会影响定时器是否关闭，如果把timer定义成局部变量，那么在每一次点击的时候都会是null，那么clearInterval根本起不到关定时器的作用。所以必须把定时器定义为全局变量。

2.对于speed这个变量，不用吧他放在外面，直接作为一个局部变量就好了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 200px;
            height: 300px;
            background: #ffccdd;
            position: absolute;
        }
    </style>
</head>
<body>
<input id="btn" type="button"/>
<div id="div1">
</div>
<script>
    var oBtn = document.getElementById('btn');
    var oDiv = document.getElementById('div1');
    var timer = null;
    oBtn.onclick = function(){
//      var timer = null;
        clearInterval(timer);
        timer = setInterval(function (){
        var speed = 1;


            if(oDiv.offsetLeft>300)
            {
                clearInterval(timer);
            }
         else
            {
                oDiv.style.left = oDiv.offsetLeft+speed+'px';
            }
        },30);

    };
</script>

</body>
</html>