日常开发中常用到 js

一、防止重复点击，避免点击过快

用来防止用户点击过快，造成多余的请求，常见的有 form 用户表单提交、付款确认、验证码获取等。

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

        //定时器
        setTimeout(function(){
            isclick = true;
        }, 500);
    }

二、时间格式转换（yyyy-MM-dd HH:mm:ss）

计算机系统时间戳转换。

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;
}

三、图片格式转换（png转base64）

常见的图片格式转换。

let imgUrl = '*****.png';
export function getBase64(imgUrl) {
  var base64 = '';
  window.URL = window.URL || window.webkitURL;
  var xhr = new XMLHttpRequest();
  // xhr.open("get", 'http://10.10.201.70:90/capturable/images/4028f2b07660d2130176659f99d40022.png', true);
  xhr.open("get", imgUrl, true);
  xhr.responseType = "blob";
  return new Promise((resolve, reject) => {
       xhr.onload = function () {
         if (this.status == 200) {
           //得到一个blob对象
           var blob = this.response;
           let oFileReader = new FileReader();
           oFileReader.onloadend = function (e) {
             // 此处拿到的已经是 base64的图片了
             base64 = e.target.result;
             return base64;
           };   
           oFileReader.readAsDataURL(blob);
         }
       }
       xhr.send();
    })
}

四、常用正则表达式

//手机号正则
var reg = /^1[0-9]{10}$/;

//身份证号（18位）正则
var cP = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/;

// 邮箱正则
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

//调用方法
!reg.test(phone)  //表示不符合手机号正则表达式

五、js 获取完整当前域名

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); //必须通过回调函数返回，否则无法及时拿到该值
	}
}