jsutlis

js操作cookies增删查操作

/**
 * cookie中获取域名
 * */
function GetCookieDomain() {
    var host = location.hostname;
    var ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    if (ip.test(host) === true || host === 'localhost') return host;
    var regex = /([^]*).*/;
    var match = host.match(regex);
    if (typeof match !== "undefined" && null !== match) host = match[1];
    if (typeof host !== "undefined" && null !== host) {
        var strAry = host.split(".");
        if (strAry.length > 1) {
            host = strAry[strAry.length - 2] + "." + strAry[strAry.length - 1];
        }
    }
    return '.' + host;
}
/**
 * 存储
 * */
function setCookie(cname, cvalue, exdays = 0) {
    cvalue = encodeURIComponent(JSON.stringify(cvalue));
    if (exdays > 0) {
        var d = new Date().getTime() + exdays * 24 * 3600 * 1000 + 8 * 3600 * 1000;
        var expires = "expires=" + new Date(d).toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    } else {
        document.cookie = cname + "=" + cvalue + ";" + ";path=/";
    }
}

// cookie取值：
function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg)){
        return unescape(arr[2]);
    }else{
        return null;
    }

}

// 清除指定cookie值
function delCookie(name) {
    var date = new Date();
    date.setTime(date.getTime() - 1);
    var delValue = getCookie(name);
    if (delValue) {
        document.cookie = name + "=" + delValue + ";expires=" + date.toGMTString();
    }
}

封装动画函数

1.向下滚动
 function idxAnimate(obj, target) {
        clearInterval(goHeightTimer)
        let nowPosition1 = null;
        goHeightTimer = setInterval(function() {
            nowPosition1 = parseInt(window.pageYOffset)
            let step = (target - nowPosition1) / 10
            step = step >= 0 ? Math.ceil(step) : Math.floor(step)
            isTopHeight = true
            if (nowPosition1 == target) {
                clearInterval(goHeightTimer)
            }
            if (step==1){
                step = 0
                nowPosition1 = target
            }
            document.documentElement.scrollTop= nowPosition1 + step;
            }, 15)

    }
    // 滚动监听事件 
    function scrollChangeHeader() {
//主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
        if(!isTop){
            clearInterval(goToptimer);
        }
        isTop = false;
     }
     
     2.回滚到顶部
     
      // 返回顶部按钮
    goTop.addEventListener('click', function () {
        // animate(window, 0)
        //设置一个定时器
        goToptimer = setInterval(function(){
            //获取滚动条的滚动高度
            let osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用于设置速度差，产生缓动的效果
            let speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop = true;  //用于阻止滚动事件清除定时器
            if(osTop == 0){
                clearInterval(goToptimer);
            }
        },30);
        header.className = 'index-header'
        initTop()
    }, false)
    
    3.swiper横向滚动
  function swiperAnimate(obj, target) {
        clearInterval(obj.timer)
        obj.timer = setInterval(function() {
            let nowPosition = null;
            let offsetLeft = parseInt(obj.offsetLeft)
                nowPosition = offsetLeft

            let step = (target - nowPosition) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            if (nowPosition == target) {
                clearInterval(obj.timer)
            }
            obj.style.left = nowPosition + step + 'px';
        }, 15)
    }
    

js获取url参数

function getQueryString(name) {
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}

封装jsonp

var ajax = function ajax(params) {
    params = params || {};
    params.data = params.data || {};
    jsonp(params);
    // 定义jsonp方法
    function jsonp(params) {
        //创建script标签并加入到页面中
        var callbackName = params.jsonp;
        var head = document.getElementsByTagName('head')[0];
        // 设置传递给后台的回调参数名，可以自定义回调函数名
        params.data['callback'] = callbackName;
        var data = formatParams(params.data);
        var script = document.createElement('script');

        head.appendChild(script);
        //发送请求
        script.src = params.url + '?' + data;
        //创建jsonp回调函数（发送请求后会得到后台结果，然后调用该回调函数）
        window[callbackName] = function (json) {
            //json为后台返回的请求结果，后台已完成该次请求的响应，之后将创建的script移除
            head.removeChild(script);
            clearTimeout(script.timer);
            window[callbackName] = null;
            //成功响应后做的处理
            params.success && params.success(json);
        };
        //为了得知此次请求是否成功，设置超时处理
        if (params.time) {
            script.timer = setTimeout(function () {
                window[callbackName] = null;
                head.removeChild(script);
                params.error && params.error({
                    message: '超时'
                });
            }, time);
        }
    };
    //格式化参数
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
        }
        // 添加一个随机数，防止缓存
        arr.push('v=' + random());
        return arr.join('&');
    }
    // 获取随机数
    function random() {
        return Math.floor(Math.random() * 10000 + 500);
    }
};

  //使用实例
        ajax({
            "url":jsonpurl,    // 请求地址
            "jsonp":"success_jsonpCallback",  // 回调函数名为"success_jsonpCallback"
            "data": {
                token:mytoken
            },
            success:function(res){   // 请求成功的回调函数
                console.log('后台没有提供回调函数，默认成功')
                if(res != null){
                    console.log("跨域请求成功！");
                }
            },
            error: function(error) {
            }   // 请求失败的回调函数*/
        });

封装ajax

function newAjax(method, url, data, callback, type) {
    //创建兼容 XMLHttpRequest 对象
    let xhr;
    if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari
        xhr = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //初始化请求
    xhr.open(method, url, true);

    //判断data是否有数据
    let param = '';
    //这里使用stringify方法将js对象格式化为json字符串
    if (JSON.stringify(data) != '{}') {
        url += '?';
        for (let i in data) {
            param += i + '=' + data[i] + '&'; //将js对象重组，拼接成url参数存入param变量中
        }
        //使用slice函数提取一部分字符串，这里主要是为了去除拼接的最后一个&字符
        //slice函数：返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
        param = param.slice(0, param.length - 1);
    }

    //判断method是否为get
    if (method == "get") {
        //是则将数据拼接在url后面
        url = url + param;
    }
    //如果method == post
    if (method == "post") {
        type == 'json' ? xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8") : xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //发送请求
        type == 'json' ? xhr.send(JSON.stringify(data)) : xhr.send(data)
    } else {
        //发送请求
        xhr.send(null);
    }

    //给请求添加状态变化事件处理函数
    xhr.onreadystatechange = function() {
        let res;
        //判断状态码
        if (xhr.status == 200 && xhr.readyState == 4) {
            //根据type参数，判断返回的内容需要进行怎样的处理
            if (type == 'json') {
                //获得 json 形式的响应数据，并使用parse方法解析
                res = JSON.parse(xhr.responseText);
            } else if (type == 'xml') {
                //获得 XML 形式的响应数据
                res = responseXML;
            } else {
                //获得字符串形式的响应数据
                res = xhr.responseText;
            }
            //调用回调函数,并将响应数据传入回调函数
            callback(res);
        }
    };
}