JavaScript运动基础

在这篇文章里,我将把JS的运动由简如深的进行分析:
## 运动基础 ##

主要步骤为:

  1. 清除定时器,保证运动过程中只有一个定时器

  2. 开启定时器

  3. 开始运动,同时加入判断以便在需要时停止运动。将移动函数进行了简单的封装。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运动基础</title>
    <style type="text/css">
    #div1 {width: 100px;height: 100px;background: black;margin-top: 10px;position: absolute;left: 0px;}
    </style>
</head>
<body>
    <input type="button" value="move" id="btn1" />
    <div id="div1"></div>
    <script type="text/javascript">//通过定时器让物体动起来
    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');
    var iTime = null;

    oBtn.onclick = function(){
        move();
    }
    function move() {
            clearInterval(iTime);//清除定时器

        iTime = setInterval(function(){

            if (oDiv.offsetLeft == 500) {
                clearInterval(iTime);
            }else{
                oDiv.style.left = oDiv.offsetLeft+10+'px';//匀速运动
            }
        },30);
        }
    </script>
</body>
</html>

当使用这种方法时出现的问题有:
需要相对应的计算每次移动的距离,否则当移动的距离不能准确到达指定位置时会出现问题

上一篇:简单整一下元素拖拽


下一篇:JavaScript实现打字项目