js_code_move/yunsu.html at master · yutaolian/js_code_move · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>运动框架---匀速运动</title>
    <style>

        #div1{
            width: 200px;
            height:200px;
            position: absolute;/*必须定义绝对定位*/
            background-color: cadetblue;
            top: 100px;
            left: 0px;/*必须定义这个*/
        }
    </style>

    <script>
        var timmer = null;

        //运动函数
        function startMove(){
            var oDiv = document.getElementById("div1");
            //打开定时器前把之前的定时器关掉
            clearInterval(timmer);

            timmer = setInterval(function(){
                var speed = 5;

                //必须使用if-else分开两种情况（运动和停止）
                if(oDiv.offsetLeft>=500){//判断是否到达终点

                    clearInterval(timmer);//到达终点之后
                }else{
                    oDiv.style.left = oDiv.offsetLeft+speed+"px";//到达终点之前
                }
            },30);
        }
    </script>


</head>
<body>
<input type="button" value="MOVE" onclick="startMove()"/>

<div id="div1" ></div>
<span style="width: 1px;height: 300px;background-color: black;position: absolute;left: 500px "></span>
</body>
</html>