JavaScript12—tools.js

本文收录了一些常用的js函数

可以执行简单动画的函数

参数:

• obj：要执行动画的对象
• attr：要执行动画的样式，比如left top width height
• target：执行动画的目标位置
• speed：移动的速度
• callback：回调函数，这个函数将会在动画执行完毕以后执行

function move(obj, attr, target, speed, callback) {

    // 关闭上一个定时器
    clearInterval(obj.timer);

    //获取元素目前的位置
    var current = parseInt(getStyle(obj, attr));

    //判断速度的正负值
    //如果从0向800移动，则speed为正
    //如果从800向0移动，则speed为负
    if (current > target) {
        //此时速度应为负值
        speed = -speed;
    }

    // 开启一个定时器，用来执行动画效果
    // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    obj.timer = setInterval(function () {
        //获取box1的原来的left值
        var oldValue = parseInt(getStyle(obj, attr));

        // 在旧值的基础上增加
        var newValue = oldValue + speed;

        // 判断newValue是否大于800
        // 从800向0移动
        // 向左移动时，需要判断newValue是否小于target
        // 向右移动时，需要判断newValue是否大于target
        if (speed < 0 && newValue < target || speed > 0 && newValue > target) {
            newValue = target;
        }

        // 将新值设置给box1
        obj.style[attr] = newValue + "px";

        //当元素移动到800px时，使其停止执行动画
        //当元素移动到0px时，使其停止执行动画
        if (newValue === target) {
            //达到目标，关闭定时器
            clearInterval(obj.timer);
            //动画执行完毕，调用回调函数
            callback && callback();
        }
    }, 30);
}

用来获取指定元素的当前的样式的函数

参数:

• obj 要获取样式的元素
• name 要获取的样式名

function getStyle(obj, name) {
    if (window.getComputedStyle) {
        //正常浏览器的方式，具有getComputedStyle( )方法
        return getComputedStyle(obj, null)[name];
    } else {
        // IE8的方式，没有getComputedStyle( )方法
        return obj.currentStyle[name];
    }
}

 类的操作

参数:

• obj 要添加class属性的元素
• cn 要添加的class值

用来向一个元素中添加指定的class属性值

function addClass(obj, cn) {
    //检查obj中是否含有cn
    if (!hasClass(obj, cn)) {
        obj.className += " " + cn;
    };
};

判断一个元素中是否含有指定的class属性值

function hasClass(obj, cn) {
    //判断obj中有没有cn class
    //创建一个正则表达式
    // var reg = /b2/;
    var reg = new RegExp("\b" + cn + "\b");
    // alert(reg);
    return reg.test(obj.className);

};

删除一个元素中指定的class属性

function removeClass(obj, cn) {
    //创建一个正则表达式
    var reg = new RegExp("\b" + cn + "\b");
    //删除class
    obj.className = obj.className.replace(reg, "");

}

切换一个类

• 如果元素中具有该类，则删除
• 如果元素中没有该类，则添加

function toggleClass(obj, cn) {
    //判断obj中是否含有cn
    if (hasClass(obj, cn)) {
        //有，则删除
        removeClass(obj, cn);
    } else {
        //没有， 则添加
        addClass(obj, cn);
    };
}

tools.js

//尝试创建一个可以执行简单动画的函数
/*
    参数:
        obj：要执行动画的对象
        attr：要执行动画的样式，比如left top width height
        target：执行动画的目标位置
        speed：移动的速度
        callback：回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {

    // 关闭上一个定时器
    clearInterval(obj.timer);

    //获取元素目前的位置
    var current = parseInt(getStyle(obj, attr));

    //判断速度的正负值
    //如果从0向800移动，则speed为正
    //如果从800向0移动，则speed为负
    if (current > target) {
        //此时速度应为负值
        speed = -speed;
    }

    // 开启一个定时器，用来执行动画效果
    // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    obj.timer = setInterval(function () {
        //获取box1的原来的left值
        var oldValue = parseInt(getStyle(obj, attr));

        // 在旧值的基础上增加
        var newValue = oldValue + speed;

        // 判断newValue是否大于800
        // 从800向0移动
        // 向左移动时，需要判断newValue是否小于target
        // 向右移动时，需要判断newValue是否大于target
        if (speed < 0 && newValue < target || speed > 0 && newValue > target) {
            newValue = target;
        }

        // 将新值设置给box1
        obj.style[attr] = newValue + "px";

        //当元素移动到800px时，使其停止执行动画
        //当元素移动到0px时，使其停止执行动画
        if (newValue === target) {
            //达到目标，关闭定时器
            clearInterval(obj.timer);
            //动画执行完毕，调用回调函数
            callback && callback();
        }
    }, 30);
}


/*
 定义一个函数，用来获取指定元素的当前的样式
     参数:
         obj 要获取样式的元素
         name 要获取的样式名
 */
function getStyle(obj, name) {
    if (window.getComputedStyle) {
        //正常浏览器的方式，具有getComputedStyle( )方法
        return getComputedStyle(obj, null)[name];
    } else {
        // IE8的方式，没有getComputedStyle( )方法
        return obj.currentStyle[name];
    }
}


/*
    定义一个函数，用来向一个元素中添加指定的class属性值
        参数:
            obj 要添加class属性的元素
            cn 要添加的class值

*/
function addClass(obj, cn) {
    //检查obj中是否含有cn
    if (!hasClass(obj, cn)) {
        obj.className += " " + cn;
    };
};

/*
   判断一个元素中是否含有指定的class属性值
       判断一个元素中是否含有指定的class属性值
*/
function hasClass(obj, cn) {
    //判断obj中有没有cn class
    //创建一个正则表达式
    // var reg = /b2/;
    var reg = new RegExp("\b" + cn + "\b");
    // alert(reg);
    return reg.test(obj.className);

};

/*
    删除一个元素中指定的class属性
*/
function removeClass(obj, cn) {
    //创建一个正则表达式
    var reg = new RegExp("\b" + cn + "\b");
    //删除class
    obj.className = obj.className.replace(reg, "");

}

/*
    toggleClass可以用来切换一-个类
        如果元素中具有该类，则删除
        如果元素中没有该类，则添加
*/
function toggleClass(obj, cn) {
    //判断obj中是否含有cn
    if (hasClass(obj, cn)) {
        //有，则删除
        removeClass(obj, cn);
    } else {
        //没有， 则添加
        addClass(obj, cn);
    };
}