• JS工具方法


    自己有时候用到的总结的:

    /*这是一个很酷的方法它返回屏幕滚动条的距离
    调用此方法返回一个带有X和Y属
    性的Object对象,属性值即是屏
    幕滚动条的距离(这个方法完美的兼容了浏览器)
    */
    function getScrollOffset() {
      if (window.pageXOffset) {
        return {
          x: window.pageXOffset,
          y: window.pageYOffset
        };
      } else {
        return {
          x: document.body.scrollLeft + document.documentElement.scrollLeft,
          y: document.body.scrollTop + document.documentElement.scrollTop
        };
      }
    }
    
    /*得到一个字符串的字节码大小*/
    function reBytesLen(target){
        var count = target.length;
        for (var i = 0; i < count ; i ++ ){
            /*得到字符串的字节码,汉字一个字等于2字节,英文字母等于1字节*/
            if(target.charCodeAt(i)>255){
                count ++;
            }
        }
        return count ;
    }
    
    /*窗口可视尺寸,调用此方法返回一个带有w和h属性的object
    对象,相应的属性值即是可视窗口的宽高尺寸(这是一个兼容的
    方法)
    */
    function getViewportOffset() {
      if (window.innerWidth) {
        return {
          w: window.innerWidth,
          h: window.innerHeight
        };
      } else {
        // 怪异模式下document.compatMode属性值是BackCompat
        // 标准模式下document.compatMode属性值是CSS1Compat
        if (document.compatMode === "BackCompat") {
          return {
            w: document.body.clientWidth,
            h: document.body.clientHeight
          };
        } else {
          return {
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight
          };
        }
      }
    }
    
    
    
    
    
    /*返回指定元素的指定的CSS样式值(兼容方法)*/
    function getStyle(elem, prop) {
      if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[prop];
      } else {
        return elem.currentStyle[prop];
      }
    }
    
    
    
    /*动态加载JavaScript脚本文件到HTML文件的head标签中,第一个
    参数是js文件的路径,第二个参数如果是函数就执行函数体,如果没
    有请用null或者其他任意值代替。(此方法是兼容方法)
    */
    function loadScript(url,callBack){
      var script = document.createElement("script");
      script.type="text/javascript";
          //IE浏览器
          if(script.readyState){
            script.onreadystatechange=function(){
              if(script.readyState=="loaded"||script.readyState=="complete"){
                script.onreadystatechange=null;
                if(callBack!=null&&typeof(callBack)=="function"){
                  callBack();
                }
              }
            };
    
          //其他浏览器
        }else{
          script.onload = function(){
            if(callBack!=null&&typeof(callBack)=="function"){
              callBack();
            }
          };
        }
    
        script.src=url;
        document.getElementsByTagName("head")[0].appendChild(script);
      }
    
    
    
       /*给一个dom对象添加该事件类型的处理函数(兼容方法)*/
       function addEvent(elem, eventType, fun) {
        if (elem.addEventListener) {
          elem.addEventListener(eventType, fun, false);
        } else if (elem.attachEvent) {
          elem.attachEvent("on" + eventType, function() {
            fun.call(elem);
          });
        } else {
          elem["on" + eventType] = fun;
        }
      }
    
    
    /*给一个dom对象添加该事件类型的处理函数(兼容方法,性能更高:延迟加载)*/
    /*这个函数实现了延迟加载。这个函数在第一次被调用时,会先检查并决定使用
    那种方法去绑定事件处理函数。然后原始的函数被包含正确操作的新函数覆盖*/
    function addHandler(target, eventType, handler) {
        if (target.addEventListener) {
            addHandler = function (target, eventType, handler) {
                target.addEventListener(eventType, handler, false);
            }
        } else if(target.attachEvent) {
            addHandler = function (target, eventType, handler) {
                target.attachEvent('on' + eventType, function () {
                    handler.call(target);
                });
            }
        }else{
            addHandler = function (target, eventType, handler) {
                target["on" + eventType] = handler;
            }
        }
        // 调用新函数
        addHandler(target, eventType, handler);
    }
    
    
    
    /*给一个dom对象解除指定的事件类型,
    不支持elem.on事件类型解除绑定(性能更好:延迟加载)*/
    /*这个函数实现了延迟加载。这个函数在第一次被调用时,会先检查并决定使用
    那种方法去取消绑定事件处理函数。然后原始的函数被包含正确操作的新函数覆盖*/
    function removeHandler(target, eventType, handler) {
        if (target.removeEventListener) {
            removeHandler = function (target, eventType, handler) {
                target.removeEventListener(eventType, handler,false);
    
            }
        } else{
            removeHandler = function (target, eventType, handler) {
                target.detachEvent('on' + eventType, handler);
            }
        }
        // 调用新函数
        removeHandler(target, eventType, handler);
    }
    
    
    
    
    /*此方法返回当前静态的时间格式为:年-月-日-时-分*/
      function getTimeNow(){
        var time = new Date();
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var day = time.getDate();
        var hour = time.getHours();
        var min = time.getMinutes();
       
        var strTime =
          year + "年" + month + "月" + day + "日" + hour + "时" + min+"分";
        return strTime; 
       }
    
    
    /*取消冒泡事件,此方法要在onclick事件中使用,
    传入event参数,取消事件冒泡(此方法是兼容方法)*/ 
       function stopBubble(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    
    /* 阻止默认事件,默认事件如:表单提交,a标签跳转,
    右键菜单等等,传入event参数,可以使默认事件取
    消(此方法是兼容方法)*/
      function cancelHandler(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    
    /*让一个元素标签移动,鼠标拖动,此方法是兼容的,
    并且预防了事件冒泡和元素的默认事件*/ 
    function drag(elem) {
      var disX, disY;
      elem.addEventListener( "mousedown",
        function(e) {
          var event = e || window.event;
          // 获取鼠标距离elem的左边的距离
          disX = event.pageX - parseInt(elem.style.left);
           // 获取鼠标距离elem的上边的距离
          disy = event.pageY - parseInt(elem.style.top);
          stopBubble(event);//阻止事件冒泡
          cancelHandler(event);//取消默认事件
          document.addEventListener("mousemove", moveFun, false);//mousemove
          document.addEventListener("mouseup",moupFun,false );//mouseup
          
          function moveFun(e) {
            var event = e || window.event;
            // elem的left距离必须是鼠标的距离减去disX的值,只有这样鼠标才能在
            // elem中间显示,不然鼠标一直在elem的左上角
            elem.style.left = event.pageX - disX + "px";
            elem.style.top = event.pageY - disy + "px";
          }
    
          function moupFun(){
          document.removeEventListener("mousemove", moveFun, false);
          }
          
        }, false);//mousedown  
    }
    
    /*继承模式:圣杯模式*/
    function inherit(Target , Orgin){
        function F (){}
        F.prototype = Orgin.prototype;
        Target.prototype = new F();
        Target.prototype .constructor = Target ;
        Target.prototype.uber = Orgin.prototype;
    }
    
    /*它将一个HTML标签集合拷贝到普通数组里,并返回一个数组,(非实时方法)*/
    function  elementsToArry(elems) {
        for(var i=0,a=[],len = elems.length ; i<len;i++){
            a[i] = elems[i];
        }
        return a;
    }
    
    
    
    /*对象的克隆,深度克隆*/
    function deepclone(origin, target) {
        var target = target || {},
            // Object.prototype.toString.call(obj.card)
            toStr = Object.prototype.toString,
            arryStr = "[object Array]";
        for (var prop in origin) {
            // 判断属性是否属于实例
            if (origin.hasOwnProperty(prop)) {
                // 判断是不是引用的值
                if (origin[prop] !== "null" && typeof (origin[prop]) == "object") {
                    // 判断是否是数组
                    if (arryStr == toStr.call(origin[prop])) {
                        target[prop] = [];
                    } else {
                        target[prop] = {};
                    }
                    //target[prop] = (arryStr == toStr.call(origin[prop]))? [] : {} ;
    
                    // 继续深层判断
                    deepclone(origin[prop], target[prop]);
    
                } else {
                    // 不是引用值
                    target[prop] = origin[prop]; // 这是方法的出口
                }
            }// if
        }
    
        return target;
    }
    
    
    /**
    * 产生随机整数,包含下限值,但不包括上限值
    * @param {Number} lower 下限
    * @param {Number} upper 上限
    * @return {Number} 返回在下限到上限之间的一个随机整数
    */
    function getRandomOpen(lower, upper) {
        lower = Number(lower);
        upper = Number(upper);
        if(lower > upper){
            [lower,upper] = [upper,lower];
        }   
        return Math.floor(Math.random() * (upper - lower)) + lower;
    }
    
    
    /*产生随机数,包含下限值同时包含上限值*/
    function getRandomClose(min,max){
        min = Number(min);
        max = Number(max);
        if(min > max){
            [min,max] = [max,min];
        }      
    return Math.round(Math.random()*(max - min) + min);
    }
    
    
    
    /*用户输入框防抖,第一个参数是输入框的输入时执行的函数,
    * 第二个参数是响应用户输入后等待的时间*/
    function debounce(handler , delay) {
        var timer = null;
        return function(){
            var _self = this;
            var _args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                handler.apply(_self,_args);
            },delay);
        }
    }
    
    
    /*日期字符串转换为Date对象,time参数默认值为false即返回的是该日期的Date对象,
    time值为true时返回 1970 年 1 月 1 日至该日期的毫秒数。
    */
    function toDate(dateString,time=false) {
                dateString = dateString.replace(/-/g, "/");
                var date = new Date(dateString);
                if(time){
                    return date.getTime();
                }else{
                    return date;
                }
    }
            //获取元素在数组的下标
            Array.prototype.indexOf = function (val) {
                for (var i = 0; i < this.length; i++) {
                    if (this[i] == val) {
                        return i;
                    };
                }
                return -1;
            };
    
            //根据数组的下标,删除该下标的元素
            Array.prototype.remove = function (val) {
                var index;
                if ((typeof val) == "number" || (typeof parseInt(val)) == "number") {
                    if (parseInt(val) > -1 && parseInt(val) < this.length) {
                        index = this.indexOf(this[val]);
                    }
                } else {
                    index = this.indexOf(val);
                }
                if (index > -1) {
                    this.splice(index, 1);
                }
            };
    
            //测试数据
            var insertAttaList = ['abs', 'dsf', 'abc', 'sdf', 'fd'];
            insertAttaList.remove('abc');
    
            var a = [
                {a:1},
                {b:2}
            ]
            a.remove(0);
            String.prototype.compare = function(str) {
                //不区分大小写
                if(this.toLowerCase() == str.toLowerCase()) {
                    return true;
                } else {
                    return false;
                }
            }
            alert("ABCDefg".compare("abcdEFG"));
            alert("abc".compare("acd"));
    // var script_lang = "plant";
    function getUrlParam(name){
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    var urlLang = getUrlParam("lang");
    /*
    *   修改路径参数
     */
    //查询字符串参数
    function getURIArgs(args) {
        var s = "";
        window.location.search.length && getQueryStringArgs()[args] ? s = getQueryStringArgs()[args] : s = "";
        return s;
    }
    function changeURI(uri, uriName, uriVar) {
        if (uri.indexOf("?") >= 0) {
            getURIArgs(uriName) ? uri = changeURLArg(uri, uriName, uriVar) : uri = uri + "&" + uriName + "=" + uriVar;
        } else {
            uri = uri + "?" + uriName + "=" + uriVar;
        }
        return uri;
    }
    
    // 获取查询字符串参数
    function getQueryStringArgs() {
        var qs = window.location.search.length > 0 ? location.search.substring(1) : "",
            args = {},
            items = qs.split("&"),
            len = items.length,
            name = null,
            value = null,
            item = null;
        if (qs.length == 0) {
            return args;
        };
        for (var i = 0; i < len; i++) {
            item = items[i].split("=");
            name = decodeURIComponent(item[0]);
            value = decodeURIComponent(item[1]);
            args[name] = value;
        }
        return args;
    }
    //修改url参数值 
    function changeURLArg(url, arg, arg_val) {
        var pattern = arg + '=([^&]*)';
        var replaceText = arg + '=' + arg_val;
        if (url.match(pattern)) {
            var tmp = '/(' + arg + '=)([^&]*)/gi';
            tmp = url.replace(eval(tmp), replaceText);
            return tmp;
        } else {
            if (url.match('[?]')) {
                return url + '&' + replaceText;
            } else {
                return url + '?' + replaceText;
            }
        }
        return url + '
    ' + arg + '
    ' + arg_val;
    
    }

  • 相关阅读:
    (项目实战三)响应式首页内容介绍
    (项目实战二)响应式轮播图
    (一)简介
    (项目实战一)响应式导航
    HttpURLConnection 411错误解决
    JMeter使用(Linux)
    性能测试工具比较
    Java常见加密算法
    HttpURLConnection发送请求
    Java AES加密案例
  • 原文地址:https://www.cnblogs.com/xiejn/p/12697368.html
Copyright © 2020-2023  润新知