常用的方法整理

//自动居中 - 浮层 ( el = Element)
function autoCenter(el) {
    var bodyW = document.documentElement.clientWidth; //网页可视区域
    var bodyH = document.documentElement.clientHeight;
    var elW = el.offsetWidth; //弹层的宽度
    var elH = el.offsetHeight;
    el.style.left = (bodyW - elW) / 2 + 'px'; //实现居中
    el.style.top = (bodyH - elH) / 2 + 'px';
}

//元素充满浏览器全屏
function fillBody(el){
    el.style.width=document.documentElement.clientWidth+'px';
    el.style.height=document.documentElement.clientHeight+'px';
}

//常用的事件函数
window.onresize=window.onload=function(){}
window.onscroll=function(){}

//可视区域宽    
function viewWidth(){
    return document.documentElement.clientWidth;
}
//可视区域高
function viewHeight(){
    return document.documentElement.clientHeight;
}

//判断element X Y是否出现了滚动条
var isScroll = function (el) {
    // test targets
    var elems = el ? [el] : [document.documentElement, document.body];

    var scrollX = false, scrollY = false;

    for (var i = 0; i < elems.length; i++) {

      var o = elems[i];

      // test horizontal  水平

      var sl = o.scrollLeft;

      o.scrollLeft += (sl > 0) ? -1 : 1;

      o.scrollLeft !== sl && (scrollX = scrollX || true);

      o.scrollLeft = sl;

      // test vertical  垂直

      var st = o.scrollTop;

      o.scrollTop += (st > 0) ? -1 : 1;

      o.scrollTop !== st && (scrollY = scrollY || true);

      o.scrollTop = st;
    }

    // ret

    return {

      scrollX: scrollX,

      scrollY: scrollY

    };

  };

//js自动刷新
  window.location.reload();

 //设置属性和获取属性值
function attr(elem, name, value) { 
    var ret; 
    if (value) { 
        if (/msie [6-7]\.0/i.test(navigator.userAgent)) { 
            ret = elem.getAttributeNode(name); 
            if (!ret) { //ie6 7不合法的属性设置捕鸟,通过这里可以设置 
                ret = document.createAttribute(name); 
                elem.setAttributeNode(ret); 
            } 
            ret.nodeValue = value + ""; 
        } else { 
            elem.setAttribute(name, value); 
        } 
        return elem; 
    } else { //ie6 7有得属性获取不了 
        ret = elem.getAttribute(name); 
        fixIe = elem.getAttributeNode(name).nodeValue; 
        ret = ret ? ret : fixIe ? fixIe : undefined; 
        return ret; 
    } 
}

//获取计算后的属性值
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj,false)[attr];
    }
}

/*
参数说明:obj是被绑定元素,
event是绑定的事件,
fn是被绑定事件触发执行的函数,
false参数:按照事件冒泡的执行顺序进行的,true的话则按照事件捕获的执行顺序进行的。
*/


function bind(obj,eventname,fn){
    if(obj.addEventListener){
        obj.addEventListener(eventname,fn,false);
    }else{
        obj.attachEvent("on"+eventname,function(){
            fn.call(obj);
        })
    }
}

//获取滚动隐藏的高度兼容方法
function scroll(){
    if(window.pageYOffset!=null){//IE9+ 以及最新版本
                return{
                    top:window.pageYOffset,
                    left:window.pageXOffset
                }
        }else if(document.compatMode=='CSS1Compat'){//检测是否声明dtd
                return{//支持IE 789 火狐 声明DTD的
                    top:document.documentElement.scrollTop,
                    left:document.documentElement.scrollLeft
                }
        }else{
                return{//没有DTD 只支持谷歌
                    top:document.body.scrollTop,
                    left:document.body.scrollLeft
                }
        }
}

//检测对象是否为数组
function isArray(obj){
  return Object.prototype.toString.call(obj)=="[object Array]";
}

function format(format) {
    var Time=new Date();
    var date = {
       "M+": Time.getMonth() + 1,
       "d+": Time.getDate(),
       "h+": Time.getHours(),
       "m+": Time.getMinutes(),
       "s+": Time.getSeconds(),
       "q+": Math.floor((Time.getMonth() + 3) / 3),
       "S+": Time.getMilliseconds()
    };
    if (/(y+)/i.test(format)) {
           format = format.replace(RegExp.$1, (Time.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (var k in date) {
           if (new RegExp("(" + k + ")").test(format)) {
                  format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
           }
    }
    return format;
}
format('yyyy') //2018
format('yyyy-MM') // 2018-01
format('yyyy-MM-dd') // 2018-01-30
format('yyyy-MM-dd:h') // 2018-01-30:16
format('yyyy-MM-dd:hh:mm ss') // 2018-01-30:16:30 45

/*清除string前后的空格*/
String.prototype.trim = function(){
  //方式一：将匹配到的每一个结果都用""替换
  return this.replace(/(^\s+)|(\s+$)/g,function(){
    return "";
  });
 
  //方式二：和方式一的原理相同
  return this.replace(/(^\s+)|(\s+$)/g,'');
};

//获取匹配空格string.getTrimOffset()
String.prototype.getTrimOffset = function(){
  /**
   * @param rs：匹配结果
   * @param $1:第1个()提取结果
   * @param $2:第2个()提取结果
   * @param offset:匹配开始位置
   * @param source：原始字符串
   */
  var arr=[];
  this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){
    //arguments中的每个元素对应一个参数
   arr.push(arguments);
  });
  return arr;
};

//实现函数escapeHtml，将<, >, &, " 进行转义
function escapeHtml(str) {
  //匹配< > " &
  return str.replace(/[<>"&]/g, function(rs) {
    switch (rs) {
      case "<":
        return "<";
      case ">":
        return ">";
      case "&":
        return "&";
      case "\"":
        return "";
    }
  });
}
//在字符串指定位置插入新字符串
String.prototype.insetAt = function(str,offset){
 
  //使用RegExp()构造函数创建正则表达式
  var regx = new RegExp("(.{"+offset+"})");
 
  return this.replace(regx,"$1"+str);
};

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input只能 输入数字 并且 可以退格 光标可以左右移动</title>
</head>
<body>
    <input type="text" id="txt">
</body>
<script>
    var txt=document.getElementById('txt');
    txt.onkeydown=function(ev){
        var oEevent=ev||event;
        console.log(oEevent.keyCode)
        //数字keycode 49~57  左右 是37 39可以退格
        if(oEevent.keyCode!=8 && oEevent.keyCode!=37 && oEevent.keyCode != 39 && (oEevent.keyCode<48||oEevent.keyCode>57)){
            return false;
        }
    }
</script>
</html>

 

/*封装方法-input框只能输入数字 输入框光标可以左右移动 可以backspace*/
function onlyNumber(ele){
    if(ele.length===undefined){
        ele.onkeydown=function(ev){
            var oEevent=ev||event;
            if(oEevent.keyCode!=8 && oEevent.keyCode!=37 && oEevent.keyCode != 39 && (oEevent.keyCode<48||oEevent.keyCode>57))
            return false;    
        }
    }else{
        for(var i=0;i<ele.length;i++){
            ele[i].onkeydown=function(ev){
                var oEevent=ev||event;
                if(oEevent.keyCode!=8 && oEevent.keyCode!=37 && oEevent.keyCode != 39 && (oEevent.keyCode<48||oEevent.keyCode>57))
                return false;    
            }
        }
    }
}

 

//获取样式
function getStyle(obj,attr){

    if (attr =='left')
    {
        return obj.offsetLeft;
    }
    else if (attr =='top')
    {
        return obj.offsetTop;
    }
    else if (attr =='width')
    {
        return obj.offsetWidth;
    }
    else if (attr =='height')
    {
        return obj.offsetHeight;
    }
    else
    {
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }
}

//运动框架

function move(obj,attr,target,time,back){

    var startTime = new Date();
    var startVal = parseInt(getStyle(obj,attr));
    
    var timer = setInterval(function(){
        
        var nowTime = new Date();
        var moveVal = parseInt(target) - startVal;

        var prop = (nowTime - startTime)/time;
        if (prop>=1)
        {
            prop = 1;
            clearInterval(timer);
            if (PicIndex==PicLi.length-1)
            {
                PicIndexLast = 1;
                back();
                objNum++;
                    if (objNum == 5)
                    {
                        PicIndex = 1;
                        objNum =0;
                    }
                prop = NaN;
            }
            else if (PicIndex==0)
            {
                PicIndexLast = PicLi.length-2;
                back();
                objNum++;
                    if (objNum == 5)
                    {
                        PicIndex = PicLi.length-2;
                        objNum =0;
                    }
                prop = NaN;
            }
        }
        obj.style[attr]=prop*moveVal+startVal+'px';
    },20)
    
}

 

(function(){
    //构造函数
    function F(){
        //私有属性和方法放在构造函数里
    }
    //共享属性和方法放在原型属性（prototype）上
    
    //共享属性
    F.prototype.attr='共享属性';
    //共享方法
    F.prototype.method=function(){

    };
    //F 的实例挂载在window下
    window.f=new F();
})(window,undefined)

(function(window.undefined){
    function G(){}
    //dom操作
    G.prototype.addClass=function(obj, sClass){
        var re=new RegExp('\\b'+sClass+'\\b');
        if(re.test(obj.className))return;
        obj.className=(obj.className+' '+sClass).match(/\S+/g).join(' ');
        return this;
    }
    G.prototype.removeClass=function(obj, sClass){
        var re=new RegExp('\\b'+sClass+'\\b', 'g');
        obj.className=obj.className.replace(re, '').replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ');
        return this;
    }
    G.prototype.removeSelfById=function(id){
        var obj=document.getElementById(id);
        try{obj.parentNode.removeChild(obj);}catch(e){};
        return this
    }
    G.prototype.getByClass=function(oParent, sClass){
        var aEle=oParent.getElementsByTagName('*');
        var re=new RegExp('\\b'+sClass+'\\b', 'i');
        var aResult=[];
        for(var i=0;i<aEle.length;i++){
            if(re.test(aEle[i].className)){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    G.prototype.getEle=function(sExp, oParent){
        var This=this;
        var aResult=[];
        var i=0;
        oParent || (oParent=document);
        if(oParent instanceof Array){
            for(i=0;i<oParent.length;i++)aResult=aResult.concat(getEle(sExp, oParent[i]));
        }else if(typeof sExp=='object'){
            if(sExp instanceof Array){
                return sExp;
            }
            else{
                return [sExp];
            }
        }else{
            //xxx, xxx, xxx
            if(/,/.test(sExp)){
                var arr=sExp.split(/,+/);
                for(i=0;i<arr.length;i++)aResult=aResult.concat(getEle(arr[i], oParent));
            }
            //xxx xxx xxx 或者 xxx>xxx>xxx
            else if(/[ >]/.test(sExp)){
                var aParent=[];
                var aChild=[];

                var arr=sExp.split(/[ >]+/);

                aChild=[oParent];

                for(i=0;i<arr.length;i++){
                    aParent=aChild;
                    aChild=[];
                    for(j=0;j<aParent.length;j++){
                        aChild=aChild.concat(getEle(arr[i], aParent[j]));
                    }
                }

                aResult=aChild;
            }
            //#xxx .xxx xxx
            else{
                switch(sExp.charAt(0)){
                    case '#':
                        return [document.getElementById(sExp.substring(1))][0];
                    case '.':
                        return This.getByClass(oParent, sExp.substring(1));
                    default:
                        return [].append(oParent.getElementsByTagName(sExp));
                }
            }
        }
        return aResult;
    }
    G.prototype.getPos=function(obj){
        var res={l: 0, t: 0};
        while(obj){
            res.l+=obj.offsetLeft||0;
            res.t+=obj.offsetTop||0;
            obj=obj.offsetParent;
        }
        return res;
    }
    G.prototype.getStyle=function(obj,attr){
        //获取样式
        if (attr =='left'){
            return obj.offsetLeft;
        }else if (attr =='top'){
            return obj.offsetTop;
        }else if (attr =='width'){
            return obj.offsetWidth;
        }else if (attr =='height'){
            return obj.offsetHeight;
        }else{
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        }
    }
    G.prototype.setStyle=function(obj, json){
        if(obj.length)
            for(var i=0;i<obj.length;i++) setStyle(obj[i], json);
        else{
            if(arguments.length==2)    //json
                for(var i in json) setStyle(obj, i, json[i]);
            else{    //name, value
                switch(arguments[1].toLowerCase()){
                    case 'opacity':
                        obj.style.filter='alpha(opacity:'+arguments[2]+')';
                        obj.style.opacity=arguments[2]/100;
                        break;
                    default:
                        if(typeof arguments[2]=='number'){
                            obj.style[arguments[1]]=arguments[2]+'px';
                        }else{
                            obj.style[arguments[1]]=arguments[2];
                        }
                    break;
                }
            }
        }
    }

    //cookie方法
    G.prototype.setCookie=function(name, value, iDay){
        if(iDay!==false){
            var oDate=new Date();
            oDate.setDate(oDate.getDate()+iDay);
            document.cookie=name+'='+value+';expires='+oDate+';path=/';
        }else{
            document.cookie=name+'='+value;
        }
    }
    G.prototype.getCookie=function(name){
        var arr=document.cookie.split('; ');
        var i=0;
        for(i=0;i<arr.length;i++){
            var arr2=arr[i].split('=');
            if(arr2[0]==name){
                return arr2[1];
            }
        }
        return '';
    }
    G.prototype.removeCookie=function(name){
        this.setCookie(name, 'a', -1);
    }

    //请求方法
    G.prototype.json2url=function(json){
        var a=[];
        for(var i in json){
            var v=json[i]+'';
            v=v.replace(/\n/g, '<br/>');
            v=encodeURIComponent(v);
            a.push(i+'='+v);
        }
        return a.join('&');
    }
    /*
    options:
    succ:    function(json)
    faild:    function(str, err)
    check:    function(obj, name, value)
    data:    额外的数据
    */
    G.prototype.postForm=function(oForm, options){
        if(!options)options={};
        oForm.onsubmit=function (){
            var data={};
            var aEle=oForm.getElementsByTagName('*');
            for(var i=0;i<aEle.length;i++){
                var name=aEle[i].name;
                var value=aEle[i].value;
                if(name){
                    if(aEle[i].type=='radio'){
                        if(aEle[i].checked){
                            if(options.check && options.check(aEle[i], name, value)==false)return false;
                            data[name]=value;
                        }
                    }else if(aEle[i].type!=undefined){
                        if(options.check && options.check(aEle[i], name, value)==false)return false;
                        data[name]=value;
                    }
                }
            }

            if(options.data){
                for(var i in options.data)data[i]=options.data[i];
            }
            request(oForm.action, data, options.succ, options.faild);
            return false;
        };
    }

    G.prototype.ajax=function(url, opt){
        var This=this;
        opt            =opt||{};
        opt.data    =opt.data||{};
        opt.data.t    =opt.data.t||new Date().getTime();
        opt.method    =opt.method||'get';

        var oAjax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");

        if(opt.method=='post'){
            oAjax.open('POST', url, true);
            oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            try{
                oAjax.send(opt.data?This.json2url(opt.data):null);
            }catch(e){}
        }else{
            url+='?'+This.json2url(opt.data);
            oAjax.open('GET', url, true);
            try{
                oAjax.send();
            }catch(e){}
        }

        oAjax.onreadystatechange=function (){
            if(oAjax.readyState==4){
                if(oAjax.status==200){
                    opt.fnSucc && opt.fnSucc(oAjax.responseText);
                }else{
                    opt.fnFaild && opt.fnFaild(oAjax.status);
                }
            }
        };
    }
    G.prototype.request=function(url, data, fnSucc, fnFaild){
        this.ajax(url, {
            data: data,
            fnSucc: function (str){
                //alert(str);
                // document.write(str);
                //document.getElementsByTagName('textarea')[0].value=str;
                try{
                    str=str.replace(/\n/g, '');
                    var json=eval('('+str+')');
                }catch(e){
                    fnFaild && fnFaild('parse error', -1);

                    //alert('你懂的：'+str);
                    var oDiv=document.getElementById('test_err_ndd');
                    if(!oDiv){
                        oDiv=document.createElement('div');
                        document.body.appendChild(oDiv);
                        oDiv.style.display='none';
                    }

                    oDiv.innerHTML+=str;
                    return;
                }

                if(json.error)
                    fnFaild&&fnFaild(json.desc, json.error);
                else
                    fnSucc&&fnSucc(json);
            },
            fnFaild: function (str){
                fnFaild&&fnFaild(str+'|'+url);
            }
        });
    }
    G.prototype.drag=function(objEv, objMove, fnMoveCallBack){
        var disX=0,disY=0;
        objEv.onmousedown=function (ev){
            var oEvent=ev||event;
            disX=(document.documentElement.scrollLeft||document.body.scrollLeft)+oEvent.clientX-objMove.offsetLeft;
            disY=(document.documentElement.scrollTop||document.body.scrollTop)+oEvent.clientY-objMove.offsetTop;

            if(objEv.setCapture){
                objEv.onmousemove=fnMove;
                objEv.onmouseup=fnUp;
                objEv.setCapture();
            }else{
                document.onmousemove=fnMove;
                document.onmouseup=fnUp;
                return false;
            }
        };

        function fnMove(ev){
            var oEvent=ev||event;
            var l=(document.documentElement.scrollLeft||document.body.scrollLeft)+oEvent.clientX-disX;
            var t=(document.documentElement.scrollTop||document.body.scrollTop)+oEvent.clientY-disY;

            fnMoveCallBack(l,t);
        }

        function fnUp(){
            this.onmousemove=null;
            this.onmouseup=null;
            if(this.releaseCapture)this.releaseCapture();
        }
    }
    G.prototype.mouseScroll=function(obj, fnCallBack){
        bindEvent(obj, 'mousewheel', fnScroll);
        bindEvent(obj, 'DOMMouseScroll', fnScroll);

        function fnScroll(ev){
            var oEvent=ev||event;
            var bDown;
            if(oEvent.wheelDelta){
                bDown=oEvent.wheelDelta<0;
            }else{
                bDown=oEvent.detail>0;
            }
            fnCallBack(bDown);
            if(oEvent.preventDefault)oEvent.preventDefault();
            return false;
        }
    }
    G.prototype.move=function(obj,attr,target,time,back){
        var startTime = new Date();
        var startVal = parseInt(getStyle(obj,attr));
        var timer = setInterval(function(){
            var nowTime = new Date();
            var moveVal = parseInt(target) - startVal;
            var prop = (nowTime - startTime)/time;
            if (prop>=1){
                prop = 1;
                clearInterval(timer);
                if (PicIndex==PicLi.length-1){
                    PicIndexLast = 1;
                    back();
                    objNum++;
                        if (objNum == 5)
                        {
                            PicIndex = 1;
                            objNum =0;
                        }
                    prop = NaN;
                }else if (PicIndex==0){
                    PicIndexLast = PicLi.length-2;
                    back();
                    objNum++;
                    if (objNum == 5){
                        PicIndex = PicLi.length-2;
                        objNum =0;
                    }
                    prop = NaN;
                }
            }
            obj.style[attr]=prop*moveVal+startVal+'px';
        },20)
    }
    G.prototype.formatDate=function(format){
        var Time=new Date();
        var date = {
           "M+": Time.getMonth() + 1,
           "d+": Time.getDate(),
           "h+": Time.getHours(),
           "m+": Time.getMinutes(),
           "s+": Time.getSeconds(),
           "q+": Math.floor((Time.getMonth() + 3) / 3),
           "S+": Time.getMilliseconds()
        };
        if (/(y+)/i.test(format)) {
               format = format.replace(RegExp.$1, (Time.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in date) {
               if (new RegExp("(" + k + ")").test(format)) {
                      format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
               }
        }
        return format;
    }
    G.prototype.onLoad=function(){
        var loaded=false;
        var added=false;
        var arr=[];
        function init(){
            if(loaded)return;
            loaded=true;
            for(var i=0;i<arr.length;i++){
                arr[i]();
                arr=null;
            }
        }

        return function (fn){
            if(loaded)return fn();
            arr.push(fn);
            if(added)return;
            //开始加载
            //chrome
            if(document.addEventListener)document.addEventListener('DOMContentLoaded', init, false);
            else{
                document.attachEvent('onreadystatechange', function (){
                    if(document.readyState=='complete'){
                        init();
                    }
                });
            }
            //其他连defer都不支持的
            window.onload=init;
            added=true;
        };
    }
    G.prototype.bindEvent=function(obj, ev, fn){
        obj.addEventListener?obj.addEventListener(ev, fn, false):obj.attachEvent('on'+ev, fn);
    }
    G.prototype.unbindEvent=function(obj, ev, fn){
        obj.removeEventListener?obj.removeEventListener(ev, fn, false):obj.detachEvent('on'+ev, fn);
    }
    window.g=new G();
})(window,undefined)

 

function isIE() {
  if (!!window.ActiveXObject || "ActiveXObject" in window)
    return true;
  else
    return false;
}

 

 

方法还有继续收集，如有不好之处敬请留言指出，如果你也有收集的方法或是自己封装写的欢迎留言分享，总有一句话会让你我强大，好东西得分享！_！