工作中常用js的整理

一、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);
    }

二、jquery 实现 60 秒倒计时

方法一：

 var time = 60;
//倒计时
function getRandomCode() {
   if (time === 0) {
       time = 60;
       return;
   } else {
       time--;
       $('#time i').text(time);
   }
   setTimeout(function() {
       getRandomCode();
   },1000);

方法二：

var timeClock;
function sendCode() {
    var timer_num = 60;
    timeClock=setInterval(function(){
        timer_num--;
        $('.clock').html(timer_num);

        if (timer_num == 0) {
            clearInterval(timeClock);
            $('.clock').html(60);
        }
    },1000)

三、获取 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("参数名")

四、Jq 获取 from 表单数据

function getFromData(id) {
    if (id == undefined) {
        id = "form"
    }
    var data = {};
    var t = $(id).serializeArray();
    $.each(t, function() {
        data[name = this.name] = this.value;
    });
    return data;
}

调用方法：

var userData. = getFromData();
userData.表单name值 //获取值

五、设置，获取，清空 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 type="text" placeholder="请输入" oninput = "checkInput(this)">

input 输入实时判断输入为金额格式

    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 canvas = document.getElementById("canvas");
 var imageData = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < imageData.data.length; i += 4) {
            // 当该像素是透明的，则设置成白色
            if (imageData.data[i + 3] == 0) {
                imageData.data[i] = 255;
                imageData.data[i + 1] = 255;
                imageData.data[i + 2] = 255;
                imageData.data[i + 3] = 255;
            }
        }
        canvas.getContext("2d").putImageData(imageData, 0, 0);
        var img = canvas.toDataURL("image/jpeg");
        img = img.substring(img.indexOf(',') + 1);
        for (var i = 0; i < imageData.data.length; i += 4) {
            // 当该像素是白色的，则设置成透明
            if (imageData.data[i] == 255) {
                imageData.data[i] = 0;
                imageData.data[i + 1] = 0;
                imageData.data[i + 2] = 0;
                imageData.data[i + 3] = 0;
            }
        }
        canvas.getContext("2d").putImageData(imageData, 0, 0);

十、常用的正则表达式

//手机号正则
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)  //表示不符合手机号正则表达式

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

十三、jq 图片懒加载

<img class="lazy" src="img/loading.gif" lazy-src="img/pic1.jpg" >
<img class="lazy" src="img/loading.gif" lazy-src="img/pic2.jpg" >

function lazyload(){
	var visible;
	$('img').each(function () {
		if( typeof($(this).attr("lazy-src"))!="undefined" ){ // 判断图片是否需要懒加载
			visible = $(this).offset().top - $(window).scrollTop(); //图片距离顶部的距离
			if ((visible > 0) && (visible < $(window).height())) {// 判断图片是否在可视区域
			    visible = true;// 图片在可视区域
			} else {
			    visible = false;// 图片不在可视区域
			}
			if (visible) {
			    $(this).attr('src', $(this).attr('lazy-src'));
			}
		}
	});
}
 // 打开页面触发函数
	lazyload();
	// 滚屏时触发函数
	window.onscroll =function(){
		lazyload(imgs);
	}

十四、jquery 图片加载失败使用默认图片代替

  //加入相应的图片类名
  $(".smallIcon").error(function () {
    $(this).attr("src", "/static/images/icon/150-150.png");
})

十五、jq 回到顶部

 $(function() {
     //先将#back-top隐藏
     $('#back-top').hide();

     //当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失
     $(window).scroll(function() {
         if ($(window).scrollTop() > 100) {
             $('#back-top').fadeIn(1000);
         } else {
             $("#back-top").fadeOut(1000);
         }
     });

     //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
     $("#back-top").click(function() {
         $('body').animate({
             scrollTop: '0'
         }, 1000);
         return false; //防止默认事件行为
     })
 })

十六、jq 实现点击复制

$(".copy").click(function () {
    var code = document.getElementById("code").innerText;// 复制的内容
    var oInput = document.createElement('input');
    oInput.value = code;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display = 'none';
    alert('复制成功');
})

十七、jq 实现今日不在显示

//今日不再显示
function closeToday() {
        var curDate = new Date();//当前日期
        var curTamp = curDate.getTime();//当前时间戳

        //当日凌晨的时间戳,减去一毫秒是为了防止后续得到的时间不会达到00:00:00的状态
        var curWeeHours = new Date(curDate.toLocaleDateString().replace(/(年|月)/g, '/').replace('日', '').replace(/[^\d-/]/g, '')).getTime() - 1;

        //当日已经过去的时间（毫秒）
        var passedTamp = curTamp - curWeeHours;

        //当日剩余时间
        var leftTamp = 24 * 60 * 60 * 1000 - passedTamp;
        var leftTime = new Date();
        leftTime.setTime(leftTamp + curTamp);
        // 设置cookie
        document.cookie = 'loginCount=1;expires=' + leftTime.toGMTString() + ';path=/';
}

$(document).ready(function () {
    var isClosed = /(^|;| )loginCount=1/.test(document.cookie); //判定cookie是否存在
    if (!isClosed) {
        $("#advert_laye").css("display", "block") //不存在cookie 显示
    } else {
        $("#advert_laye").css("display", "none") //存在cookie 隐藏
    }

});

十八、jq 实现 tab 切换

<div class="wrap">
    <ul class="tab clearfix">
        <li  class="tab-item active">项目1</li>
        <li  class="tab-item">项目2</li>
        <li  class="tab-item">项目3</li>
    </ul>
    <div class="product">
        <div class="main selected">项目1</div>
        <div class="main">项目2</div>
        <div class="main">项目3</div>
    </div>
</div>

sth2('.tab-item', '.main');
function sth2(hvObj, obj) {
    $(hvObj).hover(function () {
        var index = $(this).index();  //获取索引号
        $(this).addClass('active').siblings().removeClass('active');
        $(obj).eq(index).addClass("selected").siblings().removeClass("selected");
    });
}

十九、使用 location 简单实现搜索框历史记录功能

$(function () {
   let max_history = 7;// 存储最大历史数据
   // 鼠标移入事件
   $('#input').on('focus', function () {
       $('input').val = '';
       let data = localStorage.getItem('data'); //从本地存储中读取数据
       if (!data) {
           $('#historybox').css('display', 'none');
       } else {
           $('#historybox').css('display', 'block');
           historydata(JSON.parse(data)); // 渲染数据
       }
   })
   // 鼠标移出事件
   $('#input').on('blur', function () {
       $('#historybox').css('display', 'none');
       init_history();// 初始化历史记录，清空记录
   })
   //点击搜索按钮时，将搜索内容添加到本地存储
   $('#btn').on('click', function () {
       var search = input.value;
       var data = localStorage.getItem('data'); //从本地存储中读取数据
       if (data) {
           var arr = JSON.parse(data); //如果有数据则转换成对象或数组
       } else {
           var arr = []; //如果没有数据，则新增一条
       }
       arr.push(search);
       removalDuplicate(arr);// 对用户输入值进行处理(去重-筛选)
       localStorage.setItem('data', JSON.stringify(arr)); //将数据写入到本地存储中
   })
   // 数组去重-筛选函数
   function removalDuplicate(arr) {
       for (let i = 0; i < arr.length; i++) {
           var arritem = arr[i].trim(); // 去除字符串两端空格
           // 如果值为空，则不添加
           if (arritem == '') {
               arr.splice(i, 1);
           }
           if (arritem !== "") {
               for (let j = i + 1; j < arr.length; j++) {
                   if (arr[i] == arr[j]) {
                       arr.splice(i, 1);//如果第二次输入的值与第一次相同，则添加第二次的值
                   }
               }
           }
       }
       return arr;
   }
   // 渲染数据
   function historydata(searchArr) {
       searchArr.reverse();//反转，从后往前添加
       // 遍历出数据
       if (searchArr.length <= max_history) {//如果存储数据小于等于max_history,则遍历渲染
           for (let i = 0; i < searchArr.length; i++) {
               $('#list').append(`<li class='on'><a href='#' class='active'>${searchArr[i]}</a><li>`);
           }
       } else {//否则渲染最大历史记录条数
           for (let i = 0; i < max_history; i++) {
               $('#list').append(`<li class='on'><a href='#' class='active'>${searchArr[i]}</a><li>`);
           }
       }
   }
   // 初始化-清空历史记录
   function init_history() {
       $('#list').html('');
   }
})

二十、jq 设备判断

//判断是PC还是移动设备 true是PC，false是移动设备
function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"
    ];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

if (IsPC()) {//pc设备

}


	//判断是安卓还是iOS
	function which_device() {
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if (isAndroid) {
			return 'Android'
		}
		if (isiOS) {
			return 'iOS'
		}
	}

  if (which_device() == "Android") { //设备是安卓
  } else if (which_device() == "iOS") { //设备是iOS
  else {//除了这两种设备外的，如PC端
  }

二十一、jquery判断当前浏览器是否是IE

if (window.ActiveXObject || "ActiveXObject" in window){
   alert("it's ie")
}else{
   alert("not ie")
}

二十二、JS 链接转换为二维码

这里用到一个 JQ 插件 qrcode.js

下载地址：github.com/jeromeetien…

<div class="content1">
    <div class="code"></div>
</div>
<script src="js/jquery.qrcode.min.js"></script>
<script>
//把链接转换为二维码
 $('.code').qrcode({
    width:100,
    height:100,
    render:'canvas', //设置渲染方式 table canvas
    typeNumber : -1, //计算模式
    correctLevel : 0,//纠错等级
    background : '#ffffff',//背景颜色
    foreground : '#000000',//前景颜色
    text: "https://www.baidu.com/" //链接
  });
  </script>