首页 > 代码库 > 运动(一)

运动(一)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div移动</title>
    <style>
        div{width:100px;height:100px;background-color:green;position:absolute;left:0;top:0;}
        input{margin-top:120px;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <input type="button" value="开始运动" onclick="startMove()">
</body>
</html>
<script>
    var time = null;
    function startMove() {
        var oDiv = document.getElementById("div1");
        clearInterval(time);
        time = setInterval(function () {
            var spend = 2;
            if(oDiv.offsetLeft >= 300){//是否到达终点
                clearInterval(time);//到达终点以后
            }else{
                oDiv.style.left = oDiv.offsetLeft+spend+"px";//到达之前
            }
        },30);

    }
</script>

思考:

不会停止,if()解决;

速度取某些值的时候无法停止,注意条件==300,速度为7的时候就无法停止,解决:选择区间范围;

到达300的时候,还会运动。else解决;

重复点击的时候速度加快,这是因为每次点击,都开启了一次定时器,故而在事件开始的时候就要加clearInterval(time);

 

运动(一)