ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、视频、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[TOC] ## **自定义弹出框** ``` (function ($) { String.prototype.joinUrl=function(url){ url=url??""; if (url=="" && this=="") { return ""; } else if(url=="" && this!=="") { return this+""; } else if(url!=="" && this=="") { return "?"+url; } else { return this+'&'+url; } } String.prototype.formatZero=function(num, len) { if (String(num).length > len) { return num; } return (Array(len).join(0) + num).slice(-len) } /* $.xx.xx({}) */ $.extend({ urlGet:function(exclude){ var url = document.location.href; //声明一个对象 var getRequest = new Object(); //获取?的位置 var index = url.indexOf("?") if(index != -1) { //截取出?后面的字符串 var str = url.substr(index + 1); //将截取出来的字符串按照&变成数组 strs = str.split("&"); //将get传参存入对象中 for(var i = 0; i < strs.length; i++) { getRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]); } if (exclude!==undefined ) { delete getRequest[exclude]; } if (Object.keys(getRequest).length>0) { var url=$.objToUrl(getRequest); } else { url=""; } return url; }else{ return ""; } }, getUrlParam:function(name) { //封装方法 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return decodeURI(r[2]); return null; //返回参数值 }, objToUrl:function(url_obj){ const tempArray = []; for (const item in url_obj) { if (item) { tempArray.push(`${item}=${url_obj[item]}`); } } return `?${tempArray.join('&')}`; }, }); /* $(xxx).xxx */ $.fn.extend({ successAlert:function(msg,t=2000){ let cscg = $(`<div class="tk tk_suss" id="tk_cscg">${msg}</div>`) $('body').append(cscg) setTimeout(function(){ $('#tk_cscg').remove(); },t) }, errorAlert:function(msg,t=2000){ // let cpgg = $(`<div class="tk tk_jg" id="tk_cpgg">${msg}</div>`) let cpgg = $(`<div style="color: #856404;background-color: #fff3cd;padding: 0 20px; height: 40px; color: #2b2b2c; font-size: 18px; line-height: 40px; text-align: center; border-radius: 5px; position: fixed; top: 40%; left: 50%;z-index: 1000;" id="tk_cpgg">${msg}</div>`) $('body').append(cpgg) setTimeout(function(){ $('#tk_cpgg').remove(); },t) } }); })(jQuery); ``` ## 常规表单提交转变成ajax ``` // 常规表单提交转变成ajax $(document).on("submit", 'form:not([data-pjax])', function () { var _this = $(this); // 判断是否开启了提交确认 if (typeof ($(this).attr("submit_confirm")) == "undefined") { // 不需要提交确认,直接提交表单 formSubmit(_this); } else { // 需要确认提示 $.modal.confirm('确定要提交吗?', function () { formSubmit(_this); }) } // 表单提交 function formSubmit($this) { $.ajax(...) } ``` ## 获取url中指定的get参数 ``` //paraName 等找参数的名称 function GetUrlParam(paraName, url) { var url = url||document.location.toString(); var arrObj = url.split("?"); if (arrObj.length > 1) { var arrPara = arrObj[1].split("&"); var arr; for (var i = 0; i < arrPara.length; i++) { arr = arrPara[i].split("="); if (arr != null && arr[0] == paraName) { return arr[1]; } } return ""; } else { return ""; } } ``` 调用方法:GetUrlParam("id"); 或者GetUrlParam("id", url); **举例说明:** 假如当网页的网址有这样的参数 test.htm?id=896&s=q&p=5,则调用 GetUrlParam("p"),返回 5。 ## **对 URI 进行编码** ``` var uri="http://w3cschool.cc/my test.php?name=ståle&car=saab"; document.write(encodeURIComponent(uri)); //http%3A%2F%2Fw3cschool.cc%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab ``` ## **sku算法** ``` const arr = [['A', 'B'], ['a', 'b'], [1, 2]]; const skuGroup = (arr) => { const currentList = arr.filter(Boolean); while (currentList.length >= 2) { const first = currentList.shift(); const two = currentList.shift(); currentList.unshift([]); for (let i = 0; i < first.length; i++) { for (let j = 0; j < two.length; j++) { currentList[0].push(String(first[i]) + String(two[j])) } } } return currentList; } var a= skuGroup(arr) console.log(a);//Aa1,Aa2,Ab1,Ab2,Ba1,Ba2,Bb1,Bb2 ``` 数组格式的sku ``` const data = [ ['红色','绿色','金色','青色','白色'], ['M','L','XL','XXL','XXXL'], ['男装','女装'] ] var sku = getSku(data) function getSku(data) { let newArr = []; let delimiter = "|(_##sku##_)|"; // 分隔符,避免sku中出现相同字符出现数据丢失情况 function get(index, arr, str) { let list = ""; for (let i = 0; i < arr[index].length; i++) { list = (str === "" ? "" : str + delimiter) + arr[index][i]; if (index + 1 === arr.length) { newArr.push(list.split(delimiter)); } else { get(index + 1, arr, list); } } return newArr; } return get(0, data, ""); } console.log(sku) ``` ## **获取指定月份的日期集合** ``` function currentMonthDays(){ // 获取标准时间 let date = new Date(); // 获取当天日期 let currentDay = date.getDate(); // 获取当前月份(实际月份需要加1) let currentMonth = date.getMonth() + 1; //当小于10->01,02,03... if(currentMonth<10){ currentMonth='0'+currentMonth; } // 获取当前年份 let currentYear = date.getFullYear(); // 获取当前月有多少天 let currentMonthDays = new Date(currentYear, currentMonth, 0).getDate(); // 当前月份所有日期集合 let currentMonthArr = []; for (let day = 1; day <= currentMonthDays; day++) { // 年月日(yyyy-MM-dd) let dateItem = currentYear + "/" + currentMonth + "/" + (day < 10 ? '0' + day : day); currentMonthArr.push(dateItem); } var dates=currentMonthArr; return dates; } ``` ## **下划线与驼峰互转** ``` // 字符串下划线转驼峰 const formatToHump = (value) => { return value.replace(/\_(\w)/g, (_, letter) => letter.toUpperCase()) } // 字符串驼峰转下划线 const formatToLine = (value) => { return value.replace(/([A-Z])/g, '_$1').toLowerCase() } /** * 数据对象key 驼峰下划线互相转化 * @param {Object} data 需要转换的对象 * @param {String} type hump-转驼峰 toLine-转下划线 */ const formatHumpLineTransfer = (data, type = 'hump') => { let hump = '' // 转换对象中的每一个键值为驼峰的递归 const formatTransferKey = (data) => { if (data instanceof Array) { data.forEach(item => formatTransferKey(item)) } else if (data instanceof Object) { for (const key in data) { hump = type === 'hump' ? formatToHump(key) : formatToLine(key) data[hump] = data[key] if (key !== hump) { delete data[key] } if (data[hump] instanceof Object) { formatTransferKey(data[hump]) } } } else if (typeof data === 'string') { data = type === 'hump' ? formatToHump(data) : formatToLine(data) } } formatTransferKey(data) return data } ``` 图片在固定区域等比缩放 ``` <div class="img" style="width: 238px;height: 215px;"> <img src="{$info.company_logo}" style="border: 1px dashed #959595;"> </div> <script type="text/javascript"> var img_url=$('.img>img').attr('src'); //判断图片的大小 var img = new Image(); img.src = img_url;//图片链接 img.onload=function(e){ var w=this.width; var h=this.height; if (w>h) { //width= 236px; var remain_h=(236*h)/w; var margin_top=(213-remain_h)/2; $('.img>img').css('width','100%'); $('.img>img').css('height','auto'); $('.img>img').css('margin-top',margin_top); } else { //width= 213px; var remain_w=(213*w)/h; var margin_left=(213-remain_w)/2; $('.img>img').css('height','100%'); $('.img>img').css('width','auto'); $('.img>img').css('margin-left',margin_left); } }; </script> ``` ## 二维数组取交集 ~~~ let arr = [ [1, 2, 3, 4, 5,'aa'], [2, 3, 4, 5, 6, 7, 88,'aa'], [3, 4, 5, 6, 7, 7,'aa','bbb'], [3, 4, 5, 6, 7, 7,'aa'], [3, 4, 5, 6, 7, 9,'aa'] ]; let res = arr.reduce((acc, cur, curIndex) => acc.filter( v => cur.indexOf(v) !== -1 )); console.log(res); // [3, 4, 5, "aa"] ~~~ ## **在固定宽高的容器中保持图片的纵横比** ``` var img_obj=$('.pic img'); img_obj.each(function(i,e){ var img_url=$(e).attr('src'); //判断图片的大小 437 267 var img = new Image(); img.src = img_url;//图片链接 img.onload=function(e){ var w=this.width; var h=this.height; if (w>h) { //width= 437px; //宽度大于高度时,原图缩放后宽为437时,原图渲染的实际高度 var remain_h=(437*h)/w; if (remain_h>267) { //当原图渲染的实际高度大于容器的高度时,设置原图的实际高度为容器高度267 render_h=267; //此时的原图渲染实际宽度应小于容器宽度437 render_w=(437*267)/remain_h; $('.pic img').css('width',render_w); $('.pic img').css('height',render_h); //均分margin var margin_left=(437-render_w)/2; $('.pic img').css('margin-left',margin_left); } else { var margin_top=(267-remain_h)/2; $('.pic img').css('width','100%'); $('.pic img').css('height','auto'); $('.pic img').css('margin-top',margin_top); } } else { //height= 267px; var remain_w=(267*w)/h; if (remain_w>437) { render_w=437; render_h=(437*267)/remain_w; $('.pic img').css('width',render_w); $('.pic img').css('height',render_h); var margin_top=(267-render_h)/2; $('.pic img').css('margin-left',margin_top); }else{ var margin_left=(437-remain_w)/2; $('.pic img').css('height','267'); $('.pic img').css('width','auto'); $('.pic img').css('margin-left',margin_left); } } }; }); ``` 升级版 ``` <script type="text/javascript"> var img_obj=$('#product .item img'); img_obj.each(function(i,e){ var img_url=$(e).attr('src'); var img_container_with=$(this).width();//容器固定宽度如437 var img_container_height=$(this).height();//容器固定高度如267 //判断图片的大小 437 267 var img = new Image(); img.src = img_url;//图片链接 img.onload=function(e){ var w=this.width;//图片实际宽度 var h=this.height;//图片实际高度 console.log("w:"+w); console.log("h:"+h); if (w>h) { //width= 437px; //宽度大于高度时,原图缩放后宽为437时,原图渲染的实际高度 var remain_h=(img_container_with*h)/w; if (remain_h>img_container_height) { //当原图渲染的实际高度大于容器的高度时,设置原图的实际高度为容器高度267 render_h=img_container_height; //此时的原图渲染实际宽度应小于容器宽度437 render_w=(img_container_with*img_container_height)/remain_h; $('#product .item img').css('width',render_w); $('#product .item img').css('height',render_h); //均分margin var margin_left=(img_container_with-render_w)/2; $('#product .item img').css('margin-left',margin_left); } else { var margin_top=(img_container_with-remain_h)/2; $('#product .item img').css('width','100%'); $('#product .item img').css('height','auto'); $('#product .item img').css('margin-top',margin_top); } } else { //height= 267px; var remain_w=(img_container_height*w)/h; if (remain_w>img_container_with) { render_w=img_container_with; render_h=(img_container_with*img_container_height)/remain_w; $('#product .item img').css('width',render_w); $('#product .item img').css('height',render_h); var margin_top=(img_container_height-render_h)/2; $('#product .item img').css('margin-left',margin_top); }else{ var margin_left=(img_container_with-remain_w)/2; $('#product .item img').css('height',img_container_height); $('#product .item img').css('width','auto'); $('#product .item img').css('margin-left',margin_left); } } }; }); </script> ``` ``` <script type="text/javascript"> var img_obj=$('#product .item img'); img_obj.each(function(i,e){ var img_url=$(e).attr('src'); var img_container_with=$(this).width(); var img_container_height=$(this).height(); //判断图片的大小 437 267 var img = new Image(); img.src = img_url;//图片链接 img.onload=function(e){ var w=this.width; var h=this.height; console.log("w:"+w); console.log("h:"+h); if (w>h) { //width= 437px; //宽度大于高度时,原图缩放后宽为437时,原图渲染的实际高度 var remain_h=(img_container_with*h)/w; if (remain_h>img_container_height) { //当原图渲染的实际高度大于容器的高度时,设置原图的实际高度为容器高度267 render_h=img_container_height; //此时的原图渲染实际宽度应小于容器宽度437 render_w=(img_container_with*img_container_height)/remain_h; $('#product .item img').css('width',render_w); $('#product .item img').css('height',render_h); //均分margin var margin_left=(img_container_with-render_w)/2; $('#product .item img').css('margin-left',margin_left); } else { var margin_top=(img_container_with-remain_h)/2; $('#product .item img').css('width','100%'); $('#product .item img').css('height','auto'); $('#product .item img').css('margin-top',margin_top); } } else { //height= 267px; var remain_w=(img_container_height*w)/h; if (remain_w>img_container_with) { render_w=img_container_with; render_h=(img_container_with*img_container_height)/remain_w; $('#product .item img').css('width',render_w); $('#product .item img').css('height',render_h); var margin_top=(img_container_height-render_h)/2; $('#product .item img').css('margin-left',margin_top); }else{ var margin_left=(img_container_with-remain_w)/2; $('#product .item img').css('height',img_container_height); $('#product .item img').css('width','auto'); $('#product .item img').css('margin-left',margin_left); } } }; }); </script> ```