javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

运动、cookie、ajax、获取行内样式兼容写法、拖拽封装大合集。

//url,data,type,timeout,success,error
function ajax(options){
    //-1  整理options
    options=options||{};
    options.data=options.data||{};
    options.timeout=options.timeout||0;
    options.type=options.type||'get';
    
    //0 整理data
    var arr=[];
    for(var key in options.data){
        arr.push(key+'='+encodeURIComponent(options.data[key]));    
    }
    var str=arr.join('&');
    
    //1    创建ajax对象
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();//[object XMLHttpRequest]
    }else{
        var oAjax=new ActiveXObject('Microsoft.XMLHTTP')
    }
    
    if(options.type=='get'){
        //2.
        oAjax.open('get',options.url+'?'+str,true);
        //3.
        oAjax.send();
    }else{
        //2.
        oAjax.open('post',options.url,true);
        //设置请求头
        oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        oAjax.send(str);//身子
    }
    
    //3.5    超时
    if(options.timeout){
        var timer=setTimeout(function(){
            alert('超时了');
            oAjax.abort();//中断ajax请求    
        },options.timeout);
    }
    
    
    //4.
    oAjax.onreadystatechange=function(){//当准备状态改变时
        if(oAjax.readyState==4){//成功失败都会有4
            clearTimeout(timer);
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                options.success && options.success(oAjax.responseText);
            }else{
                options.error && options.error(oAjax.status);//http    0
            }
        }
    };
    
    
};

function ajax(url,fnWin,fnFaild){
    //1.创建ajax对象
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    //2.与服务器建立连接
    xhr.open("GET",url,true);
    //3.发送请求
    xhr.send();
    //4.接收服务器返回的信息
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                fnWin && fnWin(xhr.responseText);
            }
        }else{
            fnFaild && fnFaild();
        }
    }
}

//创建cookie
function createCookie(key,value,expires,domain,secure){
    var cookieText = encodeURIComponent(key) + "=" + encodeURIComponent(value) + ";path=/";
    if(!isNaN(expires)){
        if(typeof expires == "number" && expires > 0){
            var date = new Date();
            date.setDate(date.getDate() + expires);
            cookieText += ";expires=" + date;
        }
    }
    if(domain){
        cookieText += ";domain=" + domain;
    }
    if(secure){
        cookieText += ";secure";
    }
    document.cookie = cookieText;
}

//获取cookie
function getCookie(key){
    var keyText = encodeURIComponent(key) + "="
    var start = document.cookie.indexOf(keyText); //找到开始位置
    if(start != -1){
        var end = document.cookie.indexOf(";",start); //找到结束位置
        if(end == -1){
            end = document.cookie.length;
        }
        var cookieValue = decodeURIComponent(document.cookie.substring(start + keyText.length,end));
    }
    return cookieValue;
}

//删除cookie
function removeCookie(key){
    document.cookie = key + "=;expires=" + new Date(0) + ";path=/";
}

function drag(obj){
    var arr = [];
    obj.onmousedown = function(event){
        arr = []; //清空数组
        var e = event || window.event;
        var disX = e.offsetX;
        var disY = e.offsetY;
        document.onmousemove = function(evt){
            var e = evt || window.event;
            var L = e.clientX - disX;
            var T = e.clientY - disY;
            if(L < 0){
                L = 0; //左边界
            }else if(L > document.documentElement.clientWidth - obj.offsetWidth){ //右边界
                L = document.documentElement.clientWidth - obj.offsetWidth;
            }
            if(T < 0){
                T = 0;  //上边界
            }else if(T > document.documentElement.clientHeight - obj.offsetHeight){ //下边界
                T = document.documentElement.clientHeight - obj.offsetHeight;
            }
            obj.style.left = L + "px";
            obj.style.top = T + "px";
            arr.push({"left":obj.offsetLeft,"top":obj.offsetTop});
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }
}

function drag(obj){
    obj.onmousedown = function(evt){
        var e = evt || window.event;
        //获取鼠标当前的相对坐标值
        var disX = e.offsetX;
        var disY = e.offsetY;
        document.onmousemove = function(evt){
            var e = evt || window.event;
            obj.style.left = e.clientX - disX + "px";
            obj.style.top = e.clientY - disY + "px";
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }
    //去掉拖拽的默认行为（禁拖行为）;
    document.ondragstart = function(){
        return false;
    }
}

/*
 * 一、获取非行内样式
 *     1. 兼容
 *     IE     对象.currentStyle.属性
 *     标准          getComputedStyle(对象,1).属性
 * 二、运动框架
 * 1.计时器
 *         1》设置开关：作用何时退出计时器
 *         2》遍历json
 *             （1）获取对象属性的当前值
 *                 注：兼容
 *                     透明度（处理小数）
 *                     其它属性值（处理单位）
 *             （2）计算速度
 *                 匀速运动（处理停止条件）
 *                 缓冲运动（处理小数）
 *             （3）判断json中所有的属性是否达到目标值
 *             （4）设置运动（改变CSS值）
 *         3》检测停止（当开关为true时，停止计时器）
 */
//获取非行内样式的兼容
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
}
function sport(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var stop = true;
        for(var attr in json){
            //获取当前值
            var current = 0;
            if(attr == "opacity"){
                current = parseInt(parseFloat(getStyle(obj,attr)) * 100);
            }else{
                current = parseInt(getStyle(obj,attr));
            }
            //计算速度
            //缓冲运动
            var speed = (json[attr] - current) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(current != json[attr]){
                stop = false;
            }
            if(attr == "opacity"){
                obj.style.opacity = (current + speed) / 100;
                obj.style.filter = "alpha(opacity=" + (current + speed) + ")";
            }else{
                obj.style[attr] = current + speed + "px";
            }
        }
        if(stop){
            clearInterval(obj.timer);
            fn && fn();
        }
    },30);
}