常用js整理

悠悠 2022-12-19 13:29 215阅读 0赞

# 常用js整理 #

一个正在努力爱好运动的程序猿  
座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。

--------------------

### 文章目录 ###

*  常用js整理
 *  一、javascript 中防止重复点击、防止点击过快
 *  二、获取 URL 传输参数（支持中文）
 *  三、jquery 获取 from 表单数据
 *  四、设置，获取，清空 Cookie
 *  五、js 转换时间戳-转换成 yyyy-MM-dd HH:mm:ss
 *  六、canvas 图片下载(兼容各浏览器)
 *  七、数字，金额格式互转正则表达式
 *  八、canvas 图片背景设置为白色或透明
 *  九、常用的正则表达式
 *  十、JavaScript 获取完整当前域名
 *  十一、base64 图片压缩

--------------------

# 一、javascript 中防止重复点击、防止点击过快 #

防止重复点击可以添加一个开关,让这个开关默认为 true，第一次点击将其变为 false,点击事件的执行需要判断这个开关是否为 true，为 true 执行,false 不执行。例子如下：

var isclick= true;
    function click(){ 
        if(isclick){ 
           isclick = false;
           //下面添加需要执行的事件
            ...
        }

如果只是防止点击过快，还可以设置定时器，在一定时间后，自动将开关变为 true，下面例子就是在 500 毫秒后，开关自动变为 true。

var isclick= true;
    function click(){ 
        if(isclick){ 
            isclick= false;
            //下面添加需要执行的事件
                ...
    
            //定时器
            setTimeout(function(){ 
                isclick = true;
            }, 500);
        }

# 二、获取 URL 传输参数（支持中文） #

function getQueryString(name) { 
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) { 
            return decodeURI(r[2]);
        }
        return null;
    }
    //调用方法
    GetQueryString("参数名")
    复制代码

# 三、jquery 获取 from 表单数据 #

# 四、设置，获取，清空 Cookie #

// 设置cookies
    
    function setCookie(name, value) { 
        var exp = new Date();
        exp.setTime(exp.getTime() + 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
    }
    
    //读取cookies
    function getCookie(name) { 
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    
        if (arr = document.cookie.match(reg))
    
            return unescape(arr[2]);
        else
            return null;
    }
    
    // 清楚所有cookies
    function clearCookie() { 
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        if (keys) { 
            for (var i = keys.length; i--;) { 
                document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString(); //清除当前域名下的,例如：m.kevis.com
                document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString(); //清除当前域名下的，例如 .m.kevis.com
                document.cookie = keys[i] + '=0;path=/;domain=kevis.com;expires=' + new Date(0).toUTCString(); //清除一级域名下的或指定的，例如 .kevis.com
            }
        }
    }

# 五、js 转换时间戳-转换成 yyyy-MM-dd HH:mm:ss #

//时间戳转换方法 date:时间戳数字
    function formatDate(date) { 
      var date = new Date(date);
      var YY = date.getFullYear() + '-';
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      return YY + MM + DD +" "+hh + mm + ss;
    }

# 六、canvas 图片下载(兼容各浏览器) #

// 保存成png格式的图片
       document.getElementById("save").onclick = function () { 
           var canvas = document.getElementById("canvas");
           if (window.navigator.msSaveOrOpenBlob) { //ie浏览器
               var imgData = canvas.msToBlob();
               var blobObj = new Blob([imgData]);
               window.navigator.msSaveOrOpenBlob(blobObj, "专家认证二维码.png");
           } else { //谷歌火狐浏览器
               downLoad(canvas.toDataURL("image/png"));
           }
       }
    
       // 下载图片
       function downLoad(url) { 
           var oA = document.createElement("a");
           oA.download = '专家认证二维码';// 设置下载的文件名，默认是'下载'
           oA.href = url;
           oA.className = "qrcode"
           document.body.appendChild(oA);
           oA.click();
           oA.remove(); // 下载之后把创建的元素删除
       }

# 七、数字，金额格式互转正则表达式 #

//input 输入实时判断输入为金额格式
    <input type="text" placeholder="请输入" oninput = "checkInput(this)">
    
    function checkInput(obj) { 
            var t = obj.value.charAt(0);
            obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
            obj.value = obj.value.replace(/^[0]+[0-9]*$/gi, ""); //第一位数字不能为0
            obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是.
            obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
            if (t == '-') { 
                obj.value = '-' + obj.value;
            }
        }
    //数字转金额格式,保留两位小数点 例：将 1234567 转换为 1,234,567.00
     //s是数字，n是小数点位数
        function fmoney(s, n) { 
        n = n > 0 && n <= 20 ? n : 2;
        s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
        var l = s.split(".")[0].split("").reverse(),
        r = s.split(".")[1];
        t = "";
        for (i = 0; i < l.length; i++) { 
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        return t.split("").reverse().join("") + "." + r;
    }
    
    //金额格式转数字 例：将 1,234,567.00 转换为 1234567.00
    function moneyToNumValue(val) { 
        var num = val.trim();
        var ss = num.toString();
        if (ss.length == 0) { 
            return "0";
        }
        return ss.replace(/,/g, "");
    }

# 八、canvas 图片背景设置为白色或透明 #

# 九、常用的正则表达式 #

//手机号正则
    var reg = /^1[0-9]{10}$/;
    
    //身份证号（18位）正则
    var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    
    // 邮箱正则
    var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    
    //调用方法
    !reg.test(phone)  //表示不符合手机号正则表达式
    复制代码

# 十、JavaScript 获取完整当前域名 #

window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.net
    window.location.host; //返回url 的主机部分，例如：mp.csdn.net
    window.location.hostname; //返回mp.csdn.net
    window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)
    window.location.pathname; //返回/a/index.php或者/index.php
    window.location.protocol; //返回url 的协议部分，例如：http:，ftp:，maito:等等。
    window.location.port //url 的端口部分，如果采用默认的80端口，那么返回值并不是默认的80而是空字符

# 十一、base64 图片压缩 #

//压缩base64方法
    function dealImage(base64, w, callback) { 
     var newImage = new Image();
     var quality = 0.6; //压缩系数0-1之间
     newImage.src = base64;
     newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
     var imgWidth, imgHeight;
     newImage.onload = function() { 
      imgWidth = this.width;
      imgHeight = this.height;
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      if (Math.max(imgWidth, imgHeight) > w) { 
       if (imgWidth > imgHeight) { 
        canvas.width = w;
        canvas.height = w * imgHeight / imgWidth;
       } else { 
        canvas.height = w;
        canvas.width = w * imgWidth / imgHeight;
       }
      } else { 
       canvas.width = imgWidth;
       canvas.height = imgHeight;
       quality = 0.6;
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
      var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
      callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
     }
    }