公用js函数库

// 当前公用函数

// 获取非行间样式
function getStyle(ele, attr) {
    // ele: 元素
    // attr: 属性
    var w = 0;
    if (ele.currentStyle) {
        // ie678
        // console.log(ele.currentStyle[attr]); // 200px
        w = ele.currentStyle[attr];
    } else {
        // 标准
        // console.log(getComputedStyle(ele)[attr]); // 200px
        w = getComputedStyle(ele)[attr];
    }
    return w;
}

// 运动函数
var timer = null;
function move(ele, attr, step, target) {
    // ele: 元素
    // attr: 属性
    // step: 每一步的像素
    // target: 目标值
    // 8. 清除定时器
    clearInterval(timer);

    // 9. 判断当前起始值 和 目标值的关系  
    /* 
        起始值  目标值
          0     100    正数
          100    0     负数
    */
    // 获取起始值  和 目标值(target)
    var start = parseInt(getStyle(ele, attr));

    step = start > target ? -step : step;

    // 6. 点击一次 让div 逐渐减小到0  500开始不间断的一直减小 直到0为止
    timer = setInterval(function () {
        // 3. 获取当前值
        var cur = parseInt(getStyle(ele, attr));
        // 4. 计算结束值  a - 10  === a + (-10)
        var end = cur + step;

        // 7. 判断 ele 的left是不是到达0
        if (step < 0 && end <= target || step > 0 && end >= target) {
            end = target;
            // 8. 清除定时器
            clearInterval(timer);
        }

        // 5. 赋值给ele的left
        ele.style[attr] = end + 'px';
    }, 20);
}

// 获取验证码
// 0-9  a-z  没有传string   string当前值是undefined
function getCode(len, string) {
    // len: 验证码的长度
    // string: 可传可不传
    if (!string) {
        var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    } else {
        var str = string;
    }
    // 有一个变量存储 随机验证码
    var strNew = '';
    // 每一次都要生成一个随机数
    for (var i = 0; i < len; i++) {
        // str中选出随机的字符---随机下标
        var num = Math.floor(Math.random() * str.length);
        // console.log(num, str[num]);
        strNew += str[num];
    }
    return strNew;
}

// 将小于10的数字变成2位数
function toTwo(num) { // num = 1
    num = num < 10 ? '0' + num : num;
    return num;
}

// 不重复随机验证码
// 0-9  a-z  没有传string   string当前值是undefined
function getNoRCode(len, string) {
    // len: 验证码的长度
    // string: 可传可不传
    if (!string) {
        var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    } else {
        var str = string;
    }
    // 有一个变量存储 随机验证码
    var strNew = '';
    // 每一次都要生成一个随机数
    for (var i = 0; i < len; i++) {
        // str中选出随机的字符---随机下标
        var num = Math.floor(Math.random() * str.length);
        // console.log(num, str[num]);
        // strNew += str[num];
        // 下标对应的字符 在新的字符串中有还是没有  没有的话 加进去 有的话本轮循环作废 i--
        if (strNew.indexOf(str[num]) == -1) {
            // 没有
            strNew += str[num];
        } else {
            i--;
        }
    }
    return strNew;
}

// 创建标签
function createE(ele, txt) {
    // ele: 创建的标签
    // txt: 标签中的内容
    var td3 = document.createElement(ele);
    td3.innerHTML = txt;
    return td3;
}

// 去重数组
function qc(array) {
    var na = [];
    for (var i = 0; i < array.length; i++) {
        if (na.indexOf(array[i]) == -1) {
            na.push(array[i]);
        }
    }
    // console.log(na);
    return na;
}

// 事件绑定兼容
function addE(ele, type, fn) {
    // ele: 元素
    // type: 事件类型
    // 用某个方法是否存在来作为判断条件
    if (ele.addEventListener) {
        // 标准
        ele.addEventListener(type, fn, false);
    } else {
        // ie8
        ele.attachEvent('on' + type, fn);
    }
}

// 事件绑定取消
function removeE(ele, type, fn) {
    if (ele.removeEventListener) {
        ele.removeEventListener(type, fn, false);
    } else {
        ele.detachEvent('on' + type, fn);
    }
}


// 封装判断滚轮方向的函数
function getD(evs) {
    // evs: 事件对象
    if (evs.wheelDelta) {
        // chrome  ie
        return evs.wheelDelta > 0 ? '上' : '下';
    } else {
        // ff
        return evs.detail > 0 ? '下' : '上';

    }
}

// 拖拽函数
function drag(ele) {
    // 按下div
    ele.onmousedown = function (evs) {
        // 添加全局捕获
        if (ele.setCapture) {
            ele.setCapture();
        }
        var ev = window.event || evs;
        // 鼠标距离页面左侧的距离  元素距离页面左侧的距离
        // console.log(ev.clientX, ele.offsetLeft);
        // 求鼠标距离元素左侧的距离ml: 鼠标距离页面的距离cx1 - 元素距离页面左侧的距离ol
        var ml = ev.clientX - ele.offsetLeft;
        var mt = ev.clientY - ele.offsetTop;
        // 移动事件
        document.onmousemove = function (evs) {
            // 移动过程中 求出移动的ele的left值: l = cx - ml
            var ev = window.event || evs;
            var l = ev.clientX - ml;
            var t = ev.clientY - mt;

            var maxw = document.documentElement.clientWidth - ele.offsetWidth;
            var maxh = document.documentElement.clientHeight - ele.offsetHeight;
            // 判断条件
            if (l <= 0) {
                l = 0;
            }
            if (t <= 0) {
                t = 0;
            }
            if (l >= maxw) {
                l = maxw;
            }
            if (t >= maxh) {
                t = maxh;
            }
            ele.style.left = l + 'px';
            ele.style.top = t + 'px';
        }
        // 抬起清除移动事件
        document.onmouseup = function () {
            document.onmousemove = null;
            if (ele.releaseCapture) {
                ele.releaseCapture();
            }
        }

        return false;
    }
}

// 缓冲运动函数
function buffMove(ele, json, fn) {
    clearInterval(ele.wc);
    ele.wc = setInterval(function () {
        var tag = true; // true---表示已经到达目标值  false--表示没到
        // 获取每一个属性  for-in
        for (var key in json) {
            // 基于当前的数据  改变一次
            // 获取当前属性的当前值
            var l = getStyle(ele, key);
            if (key == 'opacity') {
                l = l * 100;
            } else {
                l = parseInt(l);
            }
            // console.log(l);

            var speed = (json[key] - l) / 20;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            var end = l + speed;
            if (end != json[key]) {
                tag = false;
            }
            if (key == 'opacity') {
                ele.style[key] = end / 100;
            } else {
                // 4. 赋值给ele
                ele.style[key] = end + 'px';
            }
        }
        // 如果for循环走完 tag还是true  表示假设成立  到达目标值  如果是false 表示没有到达目标
        if (tag) {
            // 清除定时器
            clearInterval(ele.wc);
            // 表示第一个动画执行结束
            console.log(fn);
            fn && fn();
        }
    }, 20);
}

// 面向对象的选项卡
function Tab(id) {
    this.id = id;
    this.btns = null;
    this.ps = null;

    var cont = document.getElementById(this.id);
    this.btns = cont.getElementsByTagName('button');
    this.ps = cont.getElementsByTagName('p');
    var that = this;
    // 添加 每个按钮
    for (var i = 0; i < this.btns.length; i++) {
        this.btns[i].index = i;
        // this.btns[i].onclick = this.tip;
        this.btns[i].onclick = function () {
            that.tip(this.index);
        };
    }
}

Tab.prototype.tip = function (ind) {
    // 显示对应的内容盒子  盒子和按钮的关系 下标相同
    for (var j = 0; j < this.ps.length; j++) {
        this.ps[j].className = '';
    }
    this.ps[ind].className = 'active';
}

// ajax请求数据
function ajax(type, url, data, fn) {
    // type: 请求方式 get  post
    // url: 请求地址
    // data: 请求参数
    // fn: ajax请求成功后的执行的函数 
    var ajax = new XMLHttpRequest();

    if (type == 'post') {
        // post
        // 建立连接
        ajax.open(type, url, true);
        // 设置请求头
        ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');
        // 发送请求
        ajax.send(data);
    } else {
        // get
        ajax.open(type, url + '?' + data, true);
        // 3. 发送请求
        ajax.send();
    }

    // 监听事件
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            fn(ajax.response); // 传实参
        }
    }
}