Web-极四维博客

LayUI toolbar工具栏在table表格之后加载

我在layui table的toolbar里加个下拉框显示最近几年的的年份，默认显示当前年份，但是发现写的代码没反应 var nowYear = new Date().getFullYear(); $('#years').val(nowYear); layui.form.render("select");后来才想到原来这下拉框是在table.render初始化实例前指定的，而这时表格都还没加载出来更别说toolbar工具栏了，这种情况要不将下拉框不放在toolbar，要不将代码放在table.render的done方法中即可。

2021/03/18 19:53 415 0

各种前端代码生成/可视化设计工具

magicalcoder：http://bbs.magicalcoder.com/Bootstrap可视化布局：https://www.bootcss.com/p/layoutit/vue schema生成：https://form.lljj.me/schema-generator.html

2021/03/15 10:11 405 0

JS获取本机IP地址

JS获取本地ip地址，可能部分浏览器无法使用。<!DOCTYPE html><html><head> <title></title></head><body></body><script type="text/javascript">function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs //compatibility for firefox and chrome var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var pc = new myPeerConnection({ iceServers: [] }), noop = function() {}, localIPs = {}, ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g, key; function iterateIP(ip) { if (!localIPs[ip]) onNewIP(ip); localIPs[ip] = true; } //create a bogus data channel pc.createDataChannel(""); // create offer and set local description pc.createOffer().then(function(sdp) { sdp.sdp.split('\n').forEach(function(line) { if (line.indexOf('candidate') < 0) return; line.match(ipRegex).forEach(iterateIP); }); pc.setLocalDescription(sdp, noop, noop); }).catch(function(reason) { // An error occurred, so handle the failure to connect }); //sten for candidate events pc.onicecandidate = function(ice) { if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return; ice.candidate.candidate.match(ipRegex).forEach(iterateIP); };}// UsagegetUserIP(function(ip){ alert("Got IP! :" + ip);});</script></html>

2021/02/17 13:31 344 0

HTML页面正常显示防盗链图片方法

header加入meta以下代码即可：<meta name="referrer" content="never">或者在img src标签里增加<img referrer="no-referrer|origin|unsafe-url" src="图片链接"/>参数referer 的 metedata 属性可设置content属性值为以下集合：neveralwaysorigin结果如果referer-policy的值为never：删除http head中的referer；如果referer-policy的值为default：如果当前页面使用的是https协议，而正要加载资源使用的是普通的http协议，则将http header中额referer置为空；如果referer-policy的值origin：只发送origin部分；如果referer-policy的值为always：不改变http header中的referer的值；referer改成never即不会携带来源信息去请求图片，图片即可正常显示。

2021/02/04 17:34 394 0

LayUI几款不错的表格组件

treetable-lay树形表格treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致，支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。相对于layui标准表格，它多了展开表格行功能。演示地址：https://whvse.gitee.io/treetable-lay/demo/开发文档：https://gitee.com/whvse/treetable-lay/wikis/pageslayui-soul-table一款可以表头筛选，随意拖动列位置的表格控件表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看三、后台筛选）拖动列调整顺序、隐藏显示列excel导出（根据筛选条件和列顺序导出）子表（表中表、无限层级、子表同样支持前3个功能） 5.拖动行 6.右击快捷菜单 7.合计栏支持固定列 8.双击自适应列宽 9.右侧固定列列宽拖动改到单元格左侧项目地址：https://gitee.com/saodiyang/layui-soul-table更多组件更多组件可以访问官方第三方组件库：https://fly.layui.com/extend/

TAG layui

2021/01/31 16:22 389 0

原生js封装ajax操作

若使用原生js代码可能没jquery简洁，例如在ajax调用上，下列是用原生js实现对ajax的封装。一、什么是ajax？定义：Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。作用：提高用户体验，减少网络数据的传输量二、ajax常见运用场景表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。三、Ajax原理是什么Ajax请求数据流程，其中最核心的依赖是浏览器提供的对象xhr，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面四、ajax涉及的知识点1、readyState：返回当前文档的载入状态 0-(未初始化)还没有调用send()方法 1-(载入)已调用send()方法，正在发送请求 2-(载入完成)send()方法执行完成，已经接收到全部响应内容 3-(交互)正在解析响应内容 4-(完成)响应内容解析完成，可以在客户端调用了 2、status：HTTP状态码 1XX：信息性状态码，表示接收的请求正在处理 2XX：成功状态码，表示请求正常处理 3XX：重定向状态码，表示需要附加操作来完成请求 4XX：客户端错误状态，表示服务器无法处理请求 5XX：服务器错误状态，表示服务器处理请求出错3、get和post的区别五、原生JS实现ajax请求<script> function ajax(options){ options = options ||{}; //调用函数时如果options没有指定，就给它赋值{},一个空的Object options.type=(options.type || "GET").toUpperCase();/// 请求格式GET、POST，默认为GET options.dataType=options.dataType || "json"; //响应数据格式，默认json var params=formatParams(options.data);//options.data请求的数据 var xhr; //考虑兼容性 if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else if(window.ActiveObject){//兼容IE6以下版本 xhr=new ActiveXobject('Microsoft.XMLHTTP'); } //启动并发送一个请求 if(options.type=="GET"){ xhr.open("GET",options.url+"?"+params,true); xhr.send(null); }else if(options.type=="POST"){ xhr.open("post",options.url,true); //设置表单提交时的内容类型 //Content-type数据请求的格式 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(params); } // 设置有效时间 setTimeout(function(){ if(xhr.readySate!=4){ xhr.abort(); } },options.timeout) // 接收 // options.success成功之后的回调函数 options.error失败后的回调函数 //xhr.responseText,xhr.responseXML 获得字符串形式的响应数据或者XML形式的响应数据 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ var status=xhr.status; if(status>=200&& status<300 || status==304){ options.success&&options.success(xhr.responseText,xhr.responseXML); }else{ options.error&&options.error(status); } } } } //格式化请求参数 function formatParams(data){ var arr=[]; for(var name in data){ arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name])); } arr.push(("v="+Math.random()).replace(".","")); return arr.join("&"); } //基本的使用实例 ajax({ url:"http://server-name/login", type:'post', data:{ username:'username', password:'password' }, dataType:'json', timeout:10000, contentType:"application/json", success:function(data){　　　　　　//服务器返回响应，根据响应结果，分析是否登录成功 }, //异常处理 error:function(e){ console.log(e); } })</script>参考：http://www.sohu.com/a/238246281_100109711https://www.cnblogs.com/lanyueboyu/p/8793352.html

2021/01/25 16:47 400 0

JS获取当前地址网址参数

1，获取当前窗口的url; 结果：http://localhost:61768/Home/Index?id=2&age=18 var` `url = window.location.href;2，获取当前窗口的主机名; 结果：localhost:61768 var host = window.location.host;3，获取当前窗口的端口; 结果：61768 var port = window.location.port;4，获取当前窗口的路径 ; 结果：/Home/Index　 var pathname = window.location.pathname;5，获取当前文档的Url；结果：http://localhost:61768/Home/Index?id=2&age=18　 var URL = document.URL;6，获取参数；结果：?id=2&age=18　 var search = window.location.search;7，设置或获取 URL 的协议部分；结果：http　 var protocol = window.location.protocol8，设置或获取 href 属性中在井号“#”后面的分段　　var hash = window.location.hash分割url提取参数var search = window.location.search;var age = getSearchString('age', search); //结果：18var id = getSearchString('id', search); //结果：2//key(需要检索的键） url（传入的需要分割的url地址，例：?id=2&age=18）function getSearchString(key, Url) { var str = Url; str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号） // 以&分隔字符串，获得类似name=xiaoli这样的元素数组 var arr = str.split("&"); var obj = new Object(); // 将每一个数组元素以=分隔并赋给obj对象 for (var i = 0; i < arr.length; i++) { var tmp_arr = arr[i].split("="); obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]); } return obj[key];}原文链接：https://www.cnblogs.com/qianxundaozhu/p/11584900.html

2021/01/18 10:29 465 0

layui中ajax请求圆圈载入动画

平时ajax请求时响应时间较长会设置一个转圈的载入动画，但是如果再加上数字表示百分比是不是更能减少用户使用中的焦虑呢？效果：以下以一个ajax请求为例：$.ajax({ url: "http://cway.top": function (XMLHttpRequest) { layer.load(1, { content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查询(<span id='loadProgress' >0</span>%)</div>", shade: [0.5, '#000'] }); start(); }, success: function (result) { layer.closeAll(); stop(); }});上述在载入动画上加上正在查询的文字跟载入百分比，初始值0%。其中启动了一个start()方法启动定时器，在定时器中对百分比进行增加，我这里是设置每200ms增加5%： function show() { $("#loadProgress").text(parseInt($("#loadProgress").text()) + 5); if (parseInt($("#loadProgress").text()) >= 95) { stop(); } } var timer;//定义在两个函数外面，因为两个函数都会用到！ function start() { timer = window.setInterval(show, 200);//每隔200ms调用一次show函数 } function stop() { timer = window.clearInterval(timer); $("#loadProgress").text(99); }当大于95%时停止计时器，并将百分比固定在99%，如果请求一直没响应那就卡99了，不过一般请求一般都不会卡在这，毕竟请求长时间没响应的情况很少。

2020/12/03 09:47 506 0

Electron构建你的桌面程序

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。官网：https://www.electronjs.org/

2020/11/13 12:45 441 0

LayUI关闭弹出层 layer弹出框

layer.close(index) - 关闭特定层//当你想关闭当前页的某个层时var index = layer.open();var index = layer.alert();var index = layer.load();var index = layer.tips();//正如你看到的，每一种弹层调用方式，都会返回一个indexlayer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可//如果你想关闭最新弹出的层，直接获取layer.index即可layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的//当你在iframe页面关闭自身时var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index); //再执行关闭layer.closeAll(type) - 关闭所有层layer.closeAll();　　 //关闭所有层parent.layer.closeAll(); //关闭父级所有层layer.closeAll('dialog'); 　　//关闭信息框layer.closeAll('page');　　 //关闭所有页面层layer.closeAll('iframe');　　 //关闭所有的iframe层layer.closeAll('loading'); 　　//关闭加载层layer.closeAll('tips'); 　　//关闭所有的tips层

2020/10/21 10:47 445 0