javaScript系列---【调用封装的运动函数】

html代码：

  <div id="box"></div>
    <button class="btn">向右</button>
    <button class="btn" style="margin-left: 100px;">向左</button></button>
    <script src="./js/utils.js"></script>//调用封装的js

css代码：

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0px;
        }

        button {
            position: absolute;
            top: 250px;
        }
    </style>

js代码：

 <script>
        // 0 ->1000
        // 获取元素
        var box = document.getElementById("box");
        var btns = document.getElementsByClassName("btn");


        // 0 ->1000
        btns[0].onclick = function () {
            move(box, "left", 10, 1000, 30);
        }


        // 1000 - > 0
        btns[1].onclick = function () {
            move(box, "left", 10, 0, 30);
        }
    </script>

调用封装的js代码如下：

/*
作用：获取经过浏览器渲染的样式
@para  
    eleObj :元素对象
    attr: 样式属性
@return  样式值
*/

function getStyle(eleObj, attr) {
    if (window.getComputedStyle) { //标准浏览器
        return window.getComputedStyle(eleObj)[attr];
    } else { //IE8及以下
        return eleObj.currentStyle[attr];
    }
}


/*
    作用：运动函数
    eleObj:元素对象
    attr：样式属性
    step:步长
    target：目标值
    time：定时器的执行时间
*/
function move(eleObj, attr, step, target, time) {
    // 防止用户多次点击先清除定时器
    window.clearInterval(eleObj.timer);

    // 判断step值的正负  
    // 0 - > 1000    初始值 小于 目标值  step 正数
    // 1000 -> 0      初始值 大于 目标值  step负数
    step = parseFloat(getStyle(eleObj, attr)) < target ? step : -step;
    console.log(step);

    // 设置定时器
    // 将当前定时器的返回值保存到元素对象的自定义属性上
    eleObj.timer = window.setInterval(function () {
        // 获取当前这个元素的样式值
        var curSpeed = parseFloat(getStyle(eleObj, attr));

        // 设置speed  = 当前值 + 步长 
        var speed = curSpeed + step;

        // 判断是否到达目标值
        if ((speed >= target && step > 0) || (speed <= target && step < 0)) {
            // 清除定时器
            window.clearInterval(eleObj.timer);
            // 给speed重新赋值
            speed = target;
        }

        // 设置
        eleObj.style[attr] = speed + 'px';
    }, time);


    console.dir(eleObj);

}

 效果图：