var" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢 在線咨詢
18143453325 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 建站知識(shí) > 工作中常用js的整理

工作中常用js的整理

時(shí)間：2023-02-01 01:56:02 | 來(lái)源：建站知識(shí)

時(shí)間：2023-02-01 01:56:02 來(lái)源：建站知識(shí)

一、javascript 中防止重復(fù)點(diǎn)擊、防止點(diǎn)擊過(guò)快

防止重復(fù)點(diǎn)擊可以添加一個(gè)開關(guān),讓這個(gè)開關(guān)默認(rèn)為 true，第一次點(diǎn)擊將其變?yōu)?false,點(diǎn)擊事件的執(zhí)行需要判斷這個(gè)開關(guān)是否為 true，為 true 執(zhí)行,false 不執(zhí)行。例子如下：

var isclick= true;function click(){ if(isclick){ isclick = false; //下面添加需要執(zhí)行的事件 ... }如果只是防止點(diǎn)擊過(guò)快，還可以設(shè)置定時(shí)器，在一定時(shí)間后，自動(dòng)將開關(guān)變?yōu)?true，下面例子就是在 500 毫秒后，開關(guān)自動(dòng)變?yōu)?true。

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

二、jquery 實(shí)現(xiàn) 60 秒倒計(jì)時(shí)

方法一：

var time = 60;//倒計(jì)時(shí)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 傳輸參數(shù)（支持中文）

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;}//調(diào)用方法GetQueryString("參數(shù)名")

四、Jq 獲取 from 表單數(shù)據(jù)

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;}調(diào)用方法：

var userData. = getFromData();userData.表單name值 //獲取值

五、設(shè)置，獲取，清空 Cookie

// 設(shè)置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(); //清除當(dāng)前域名下的,例如：m.kevis.com document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString(); //清除當(dāng)前域名下的，例如 .m.kevis.com document.cookie = keys[i] + '=0;path=/;domain=kevis.com;expires=' + new Date(0).toUTCString(); //清除一級(jí)域名下的或指定的，例如 .kevis.com } }}

六、js 轉(zhuǎn)換時(shí)間戳-轉(zhuǎn)換成 yyyy-MM-dd HH:mm:ss

//時(shí)間戳轉(zhuǎn)換方法 date:時(shí)間戳數(shù)字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, "專家認(rèn)證二維碼.png"); } else {//谷歌火狐瀏覽器 downLoad(canvas.toDataURL("image/png")); } } // 下載圖片 function downLoad(url) { var oA = document.createElement("a"); oA.download = '專家認(rèn)證二維碼';// 設(shè)置下載的文件名，默認(rèn)是'下載' oA.href = url; oA.className = "qrcode" document.body.appendChild(oA); oA.click(); oA.remove(); // 下載之后把創(chuàng)建的元素刪除 }

八、數(shù)字，金額格式互轉(zhuǎn)正則表達(dá)式

<input type="text" placeholder="請(qǐng)輸入" oninput = "checkInput(this)">input 輸入實(shí)時(shí)判斷輸入為金額格式

function checkInput(obj) { var t = obj.value.charAt(0); obj.value = obj.value.replace(/[^/d.]/g, ""); //清除"數(shù)字"和"."以外的字符 obj.value = obj.value.replace(/^[0]+[0-9]*$/gi, ""); //第一位數(shù)字不能為0 obj.value = obj.value.replace(/^/./g, ""); //驗(yàn)證第一個(gè)字符是數(shù)字而不是. obj.value = obj.value.replace(//.{2,}/g, "."); //只保留第一個(gè). 清除多余的 obj.value = obj.value.replace(".", "$#$").replace(//./g, "").replace("$#$", "."); obj.value = obj.value.replace(/^(/-)*(/d+)/.(/d/d).*$/,'$1$2.$3'); //只能輸入兩個(gè)小數(shù) if (t == '-') { obj.value = '-' + obj.value; } }數(shù)字轉(zhuǎn)金額格式,保留兩位小數(shù)點(diǎn) 例：將 1234567 轉(zhuǎn)換為 1,234,567.00

//s是數(shù)字，n是小數(shù)點(diǎn)位數(shù) 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;}金額格式轉(zhuǎn)數(shù)字 例：將 1,234,567.00 轉(zhuǎn)換為 1234567.00

function moneyToNumValue(val) { var num = val.trim(); var ss = num.toString(); if (ss.length == 0) { return "0"; } return ss.replace(/,/g, "");}

九、canvas 圖片背景設(shè)置為白色或透明

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) { // 當(dāng)該像素是透明的，則設(shè)置成白色 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) { // 當(dāng)該像素是白色的，則設(shè)置成透明 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);

十、常用的正則表達(dá)式

//手機(jī)號(hào)正則var reg = /^1[0-9]{10}$/;//身份證號(hào)（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})$/;//調(diào)用方法!reg.test(phone) //表示不符合手機(jī)號(hào)正則表達(dá)式

十一、JavaScript 獲取完整當(dāng)前域名

window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.netwindow.location.host; //返回url 的主機(jī)部分，例如：mp.csdn.netwindow.location.hostname; //返回mp.csdn.netwindow.location.href; //返回整個(gè)url字符串(在瀏覽器中就是完整的地址欄)window.location.pathname; //返回/a/index.php或者/index.phpwindow.location.protocol; //返回url 的協(xié)議部分，例如： http:，ftp:，maito:等等。window.location.port //url 的端口部分，如果采用默認(rèn)的80端口，那么返回值并不是默認(rèn)的80而是空字符

十二、base64 圖片壓縮

//壓縮base64方法function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; //壓縮系數(shù)0-1之間 newImage.src = base64; newImage.setAttribute("crossOrigin", 'Anonymous'); //url為外域時(shí)需要 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); //壓縮語(yǔ)句 callback(base64); //必須通過(guò)回調(diào)函數(shù)返回，否則無(wú)法及時(shí)拿到該值 }}

十三、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())) {// 判斷圖片是否在可視區(qū)域 visible = true;// 圖片在可視區(qū)域 } else { visible = false;// 圖片不在可視區(qū)域 } if (visible) { $(this).attr('src', $(this).attr('lazy-src')); } } });} // 打開頁(yè)面觸發(fā)函數(shù) lazyload(); // 滾屏?xí)r觸發(fā)函數(shù) window.onscroll =function(){ lazyload(imgs); }

十四、jquery 圖片加載失敗使用默認(rèn)圖片代替

//加入相應(yīng)的圖片類名 $(".smallIcon").error(function () { $(this).attr("src", "/static/images/icon/150-150.png");})

十五、jq 回到頂部

$(function() { //先將#back-top隱藏 $('#back-top').hide(); //當(dāng)滾動(dòng)條的垂直位置距頂部100像素一下時(shí)，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失 $(window).scroll(function() { if ($(window).scrollTop() > 100) { $('#back-top').fadeIn(1000); } else { $("#back-top").fadeOut(1000); } }); //點(diǎn)擊跳轉(zhuǎn)鏈接，滾動(dòng)條跳到0的位置，頁(yè)面移動(dòng)速度是1000 $("#back-top").click(function() { $('body').animate({ scrollTop: '0' }, 1000); return false; //防止默認(rèn)事件行為 }) })

十六、jq 實(shí)現(xiàn)點(diǎn)擊復(fù)制

$(".copy").click(function () { var code = document.getElementById("code").innerText;// 復(fù)制的內(nèi)容 var oInput = document.createElement('input'); oInput.value = code; document.body.appendChild(oInput); oInput.select(); // 選擇對(duì)象 document.execCommand("Copy"); // 執(zhí)行瀏覽器復(fù)制命令 oInput.className = 'oInput'; oInput.style.display = 'none'; alert('復(fù)制成功');})

十七、jq 實(shí)現(xiàn)今日不在顯示

//今日不再顯示function closeToday() { var curDate = new Date();//當(dāng)前日期 var curTamp = curDate.getTime();//當(dāng)前時(shí)間戳 //當(dāng)日凌晨的時(shí)間戳,減去一毫秒是為了防止后續(xù)得到的時(shí)間不會(huì)達(dá)到00:00:00的狀態(tài) var curWeeHours = new Date(curDate.toLocaleDateString().replace(/(年|月)/g, '/').replace('日', '').replace(/[^/d-/]/g, '')).getTime() - 1; //當(dāng)日已經(jīng)過(guò)去的時(shí)間（毫秒） var passedTamp = curTamp - curWeeHours; //當(dāng)日剩余時(shí)間 var leftTamp = 24 * 60 * 60 * 1000 - passedTamp; var leftTime = new Date(); leftTime.setTime(leftTamp + curTamp); // 設(shè)置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 實(shí)現(xiàn) tab 切換

<div class="wrap"> <ul class="tab clearfix"> <li class="tab-item active">項(xiàng)目1</li> <li class="tab-item">項(xiàng)目2</li> <li class="tab-item">項(xiàng)目3</li> </ul> <div class="product"> <div class="main selected">項(xiàng)目1</div> <div class="main">項(xiàng)目2</div> <div class="main">項(xiàng)目3</div> </div></div>sth2('.tab-item', '.main');function sth2(hvObj, obj) { $(hvObj).hover(function () { var index = $(this).index(); //獲取索引號(hào) $(this).addClass('active').siblings().removeClass('active'); $(obj).eq(index).addClass("selected").siblings().removeClass("selected"); });}

十九、使用 location 簡(jiǎn)單實(shí)現(xiàn)搜索框歷史記錄功能

$(function () { let max_history = 7;// 存儲(chǔ)最大歷史數(shù)據(jù) // 鼠標(biāo)移入事件 $('#input').on('focus', function () { $('input').val = ''; let data = localStorage.getItem('data'); //從本地存儲(chǔ)中讀取數(shù)據(jù) if (!data) { $('#historybox').css('display', 'none'); } else { $('#historybox').css('display', 'block'); historydata(JSON.parse(data)); // 渲染數(shù)據(jù) } }) // 鼠標(biāo)移出事件 $('#input').on('blur', function () { $('#historybox').css('display', 'none'); init_history();// 初始化歷史記錄，清空記錄 }) //點(diǎn)擊搜索按鈕時(shí)，將搜索內(nèi)容添加到本地存儲(chǔ) $('#btn').on('click', function () { var search = input.value; var data = localStorage.getItem('data'); //從本地存儲(chǔ)中讀取數(shù)據(jù) if (data) { var arr = JSON.parse(data); //如果有數(shù)據(jù)則轉(zhuǎn)換成對(duì)象或數(shù)組 } else { var arr = []; //如果沒(méi)有數(shù)據(jù)，則新增一條 } arr.push(search); removalDuplicate(arr);// 對(duì)用戶輸入值進(jìn)行處理(去重-篩選) localStorage.setItem('data', JSON.stringify(arr)); //將數(shù)據(jù)寫入到本地存儲(chǔ)中 }) // 數(shù)組去重-篩選函數(shù) 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; } // 渲染數(shù)據(jù) function historydata(searchArr) { searchArr.reverse();//反轉(zhuǎn)，從后往前添加 // 遍歷出數(shù)據(jù) if (searchArr.length <= max_history) {//如果存儲(chǔ)數(shù)據(jù)小于等于max_history,則遍歷渲染 for (let i = 0; i < searchArr.length; i++) { $('#list').append(`<li class='on'><a href='#' class='active'>${searchArr[i]}</a><li>`); } } else {//否則渲染最大歷史記錄條數(shù) 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 設(shè)備判斷

//判斷是PC還是移動(dòng)設(shè)備 true是PC，false是移動(dòng)設(shè)備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設(shè)備} //判斷是安卓還是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") { //設(shè)備是安卓 } else if (which_device() == "iOS") { //設(shè)備是iOS else {//除了這兩種設(shè)備外的，如PC端 }

二十一、jquery判斷當(dāng)前瀏覽器是否是IE

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

二十二、JS 鏈接轉(zhuǎn)換為二維碼

這里用到一個(gè) 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>//把鏈接轉(zhuǎn)換為二維碼 $('.code').qrcode({ width:100, height:100, render:'canvas', //設(shè)置渲染方式 table canvas typeNumber : -1, //計(jì)算模式 correctLevel : 0,//糾錯(cuò)等級(jí) background : '#ffffff',//背景顏色 foreground : '#000000',//前景顏色 text: "https://www.baidu.com/" //鏈接 }); </script>

二十三、

關(guān)鍵詞：整理,中常,工作

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉