运动函数的封装

单方向匀速运动

// 获取元素
var div = document.getElementsByTagName("div")[0];
var btn = document.getElementsByTagName("button")[0];
​
​
// 定义变量保存定时器的返回值
var timer = null;
​
// 绑定事件  div  left  10 ->1000
btn.onclick = function () {
    // 防止用户多次点击 在设置定时器之前先清除定时器
    clearInterval(timer);
​
    // 设置定时器
    timer = setInterval(function () {
        // 先获取当前的样式值
        var curVal = parseFloat(getStyle(div, "left"));
​
        // 每次在原来的基础上去增加一个固定值
        var speed = curVal + 10;
​
        // 清除定时器
        if (speed >= 1000) {
            // 重新给speed进行赋值  因为speed可能大于目标值
            speed = 1000;
            clearInterval(timer);
​
        }
​
        console.log(timer);
​
        // 设置
        div.style.left = speed + 'px';
    }, 50);
}

反复匀速运动

// 获取元素
var div = document.getElementsByTagName("div")[0];
var btn = document.getElementsByTagName("button");


// 定义变量保存定时器的返回值
var timer = null;

// 绑定事件  div  left  10 ->1000
btn[0].onclick = function () {
     div.style.backgroundImage ="url('./img/right.gif')";
    // 防止用户多次点击 在设置定时器之前先清除定时器
    clearInterval(timer);

    // 设置定时器
    timer = setInterval(function () {
        // 先获取当前的样式值
        var curVal = parseFloat(getStyle(div, "left"));

        // 每次在原来的基础上去增加一个固定值
        var speed = curVal + 10;

        //到达目标值清除定时器
        if (speed >= 1000) {
            // 重新给speed进行赋值  因为speed可能大于目标值
            speed = 1000;
            clearInterval(timer);
        }

        // 设置
        div.style.left = speed + 'px';
    }, 50);
}


// 1000 -> 10
btn[1].onclick = function(){
    div.style.backgroundImage ="url('./img/left.gif')";
    // 防止用户多次点击先清除定时器
    clearInterval(timer);
    // 设置定时器
    timer = setInterval(function(){
        // 先获取当前的样式值
        var curVal = parseFloat(getStyle(div,"left"));

         // 每次在原来的基础上去减少一个固定值
         var speed = curVal - 10;

        //到达目标值清除定时器
        if(speed<= 10){
            // 重新给speed赋值
            speed = 10;
        }

        // 设置
        div.style.left = speed + 'px';
    },50);
}

简单的封装

/*
    作用：匀速运动
    @para:参数
        eleObj：元素对象
        attr:样式属性
        step:步长
        target:目标值
*/

function move(eleObj, attr, step, target) {
    // 防止用户多次点击先清除定时器
    clearInterval(timer);
    // 设置定时器
    timer = setInterval(function () {
        // 先获取当前的样式值
        var curVal = parseFloat(getStyle(eleObj, attr));

        // 每次在原来的基础上去增加一个固定值
        var speed = curVal + step;

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

        // 设置样式值
        eleObj.style[attr] = speed + 'px';
    }, 50);
}

封装完善

/*
         作用：匀速运动
         @para:参数
             eleObj：元素对象
             attr:样式属性
             step:步长
             target:目标值
     */

function move(eleObj, attr, step, target) {
    // 判断步长的正负
    //  初始值小于目标值step正数，初始值大于目标值step为负数
    step = parseFloat(getStyle(eleObj, attr)) < target ? step : -step;
    // 防止用户多次点击先清除定时器
    clearInterval(eleObj.timer);
    // 设置定时器并且将定时器的返回值保存元素的自定义属性上
    eleObj.timer = setInterval(function () {
        // 先获取当前的样式值
        var curVal = parseFloat(getStyle(eleObj, attr));

        // 每次在原来的基础上去增加一个固定值
        var speed = curVal + step;

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

        // 设置样式值
        eleObj.style[attr] = speed + 'px';
    }, 50);
}