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

运动(一)

2024-08-18 10:04:41   222人阅读

<!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);

 

运动(一)


联系
我们