浅谈Javascript中匀速运动的停止条件

165 阅读 0 评论 109 点赞

我是靠谱客的博主健康板栗，最近开发中收集的这篇文章主要介绍浅谈Javascript中匀速运动的停止条件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我们先来看下之前的匀速运动的代码，修改了速度speed后会出现怎么样的一个bug。这里加了两个标杆用于测试

复制代码代码如下:

<style type="text/css">

            #div1 {

                width: 100px;

                height: 100px;

                position: absolute;

                background: red;

                top: 50px;

                left: 600px;

            }

            #div2 {

                width: 1px;

                height: 300px;

                position: absolute;

                left: 300px;

                top: 0;

                background: black;

            }

            #div3 {

                width: 1px;

                height: 300px;

                position: absolute;

                left: 100px;

                top: 0;

                background: black;

            }

        </style>

        <script type="text/javascript">

            var time = null;

            function startMove(iTarget) {

                var oDiv = document.getElementById("div1");

                clearInterval(time);

                time = setInterval(function() {

                    var speed = 0;

                    if (oDiv.offsetLeft < iTarget) {

                        speed = 7;

                    } else {

                        speed = -7;

                    }

                    // 其实这种情况是有问题的

                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                }, 30)

            }

        </script>

    </head>

    <body>

        <input type="button" id="btn" value="到100" onclick="startMove(100)" />

        <input type="button" id="btn" value="到300" onclick="startMove(300)" />

        <div id="div1">

        </div>

        <div id="div2">

        </div>

        <div id="div3">

        </div>

    </body>