一些未封装或已封装的方法函数

或许能用上或许用不上的几个方法

1. 选项卡

//具有鼠标事件的标签
var lis = document.getElementsByTagName("li");
//需要改变的内容
var divs = document.getElementsByClassName("content");
for (let i = 0; i < lis.length; i++) {
    lis[i].onmouseover = function () {
        for(let j = 0; j < lis.length; j++){
            divs[j].style.display = "none";
        }
        divs[i].style.display = "block";
    }
}

选项卡.gif

2. 原生JS封装动画（Animator.js），搭配动画算子（easing）使用

function Animator(duatrion, easing, process) {
    /*动画周期*/
    this.duration = duatrion || 1000;
    /*动画使用到的算子*/
    this.easing = easing;
    /*动画执行期间需要执行的回调函数*/
    this.process = process;
    if(!(this.easing instanceof Function)){
        this.easing = function (p) {
            return p;
        }
    }
}
/*启动动画，  参数：表示是否循环*/
Animator.prototype.start = function (loop) {
    if(!(this.process instanceof Function)){
        return ;
    }
    var startTime = new Date();
    var p;
    var self = this;
    this.animatorId = requestAnimationFrame(function step() {
        p = Math.min(1, (new Date() - startTime) / self.duration);
        self.process(self.easing(p), p);
        if (p == 1) {
            if (loop) {
                startTime = new Date();
            }else{
                return;
            }
        }
        console.log("a");
        self.animatorId = requestAnimationFrame(step);
    })
}
Animator.prototype.stop = function () {
    cancelAnimationFrame(this.animatorId);
}

3. 原生JS封装AJAX(myAjax.js)

var ajax = {
    get : function (url, onSuccess, onFail) {
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("GET", url, true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                if(xhr.status === 200) {
                    if(onSuccess instanceof Function){
                        onSuccess(xhr.responseText);
                    }
                }else{
                    if(onFail instanceof Function){
                        onFail("你的请求失败，请重试");
                    }
                }
            }
        };
        xhr.send(null);
    },
    post : function (url, data, onSuccess, onFail) {
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                if(xhr.status === 200) {
                    if(onSuccess instanceof Function){
                        onSuccess(xhr.responseText);
                    }
                }else{
                    if(onFail instanceof Function){
                        onFail("你的请求失败，请重试");
                    }
                }
            }
        };
        if(!(data instanceof FormData)){
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        xhr.send(data);
    }
}

4. 两个元素之间的交换

//1
var a = 3 , b = 30;
[a,b] = [b,a];
console.log(a + " " +b);
//2
var a = 4, b = 6;
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log(a + " " +b);

5. 利用数组的slice方法可以将 含有length属性的特殊对象转换成数组

文件上传：