18143453325 在线咨询 在线咨询
18143453325 在线咨询
所在位置: 首页 > 营销资讯 > 建站知识 > 工作中常用js的整理

工作中常用js的整理

时间:2023-02-01 01:56:02 | 来源:建站知识

时间:2023-02-01 01:56:02 来源:建站知识

一、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

// 设置cookiesfunction setCookie(name, value) { var exp = new Date(); exp.setTime(exp.getTime() + 60 * 60 * 1000); document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";}//读取cookiesfunction getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return unescape(arr[2]); else return null;}// 清楚所有cookiesfunction 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{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.netwindow.location.host; //返回url 的主机部分,例如:mp.csdn.netwindow.location.hostname; //返回mp.csdn.netwindow.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)window.location.pathname; //返回/a/index.php或者/index.phpwindow.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

下载地址:https://github.com/jeromeetienne/jquery-qrcode

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

二十三、

关键词:整理,中常,工作

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭