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

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了,不过一般请求一般都不会卡在这,毕竟请求长时间没响应的情况很少。

layui中ajax请求圆圈载入动画

Electron构建你的桌面程序

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

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层

layui自带控件图标出现方格不显示解决方法

  首先我猜是拦截器原因,经排查一切正常,直到看到前端报错:Failed to decode downloaded font: http://localhost/layui/font/iconfont.woff?v=250才让我恍然大悟。  先对该url进行访问,可以访问但下载的内容为空,于是在前端文件夹中看woff等图标文件,发现原来这些文件内容均为空,遂从layui官网重新下载layui源码,将图标文件替换即可。

layui自带控件图标出现方格不显示解决方法

Prettify代码高亮

Prettify代码高亮所需css(放网站head中)<style type=text/css>.prettyprint,pre.prettyprint{white-space:pre-wrap;word-wrap:break-word;background-color:#444;border:1px solid #272822;overflow:hidden;padding:0;margin:20px 0;font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;color:#666}.prettyprint.linenums,pre.prettyprint.linenums{-webkit-box-shadow:inset 40px 0 0 #39382e,inset 41px 0 0 #464741;-moz-box-shadow:inset 40px 0 0 #39382e,inset 41px 0 0 #464741;box-shadow:inset 40px 0 0 #39382e,inset 41px 0 0 #464741}.prettyprint.linenums ol,pre.prettyprint.linenums ol{margin:0 0 0 33px;padding:5px 10px}.prettyprint.linenums ol li,pre.prettyprint.linenums ol li{color:#bebec5;line-height:20px;margin-left:0;list-style:decimal}.prettyprint ol.linenums{margin-bottom:0;background-color:#272822}.prettyprint .com{color:#93a1a1}.prettyprint .lit{color:#ae81ff}.prettyprint .clo,.prettyprint .opn,.prettyprint .pun{color:#f8f8f2}.prettyprint .fun{color:#dc322f}.prettyprint .atv,.prettyprint .str{color:#e6db74}.prettyprint .kwd,.prettyprint .tag{color:#f92659}.prettyprint .atn,.prettyprint .dec,.prettyprint .typ,.prettyprint .var{color:#a6e22e}.prettyprint .pln{color:#66d9ef} </style>或单独写在css文件中,本站引用<link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />上述css本主题下代码上下有20px留白,遂可将上述margin:20px 0改为0px本站引用的js<script src=/zb_users/plugin/FY_Prettify/prettify.js type=text/javascript></script>调用/*初始化prettyPrint 这里我直接置于本站prettify.js末尾的*/$(window).on('load',function(){ jQuery("pre").addClass("prettyprint"); prettyPrint();})jQuery("pre").attr("class","fy-prettyprint linenums");

前端js页面加载完成时间ready与onload区别 执行顺序

ready()执行时机:等待页面Dom树加载完成后,就开始执行。在js文件中可以出现多个ready(),并且按照顺序执行。document.ready = function(){};//jq写法$(document).ready(function () {});//更精简$(function(){});onload()执行时机:等待页面中的所有资源(包括图片、视频等资源)都加载完成后,才会执行。而且在js中文件中只有一个onload事件。window.onload = function(){};//JQ写法$(window).load(function(){})标签上静态绑定onload事件<body onload="test()">等待body加载完成,就会执行test()方法。执行顺序ready->onload->标签绑定onload。因此同一个页面中ready要先执行,在动态页面加载后需触发模拟点击事件的话建议使用第一种onload,即资源全部加载完进行模拟点击。模拟点击$('#firstpage').trigger("click");//或使用原生var e = document.createEvent("MouseEvents");    e.initEvent("click", true, true);    document.getElementById("firstpage").dispatchEvent(e);

JavaScript prototype用法示例

prototype 属性使您有能力向对象添加属性和方法。语法object.prototype.name=value控制台直接输入Number.prototype可打印出Number的所有属性,若需要获得某个对象属性这是个不错的选择。示例:<script> function employee(name,job,born) { this.name=name; this.job=job; this.born=born; } var bill=new employee("Bill Gates","Engineer",1985); // prototype 属性使您有能力向对象添加属性和方法。 employee.prototype.salary=null; bill.age=18; bill.salary=20000; bill['like']='playGame'; document.write(bill.salary); document.write("<br>"+bill.age); document.write("<br>"+bill.like); // 也可给自带对象添加属性 String.prototype.addEndStr=function(d){ return this+'?'+d; }; // 输出“你好么?世界” alert("你好么".addEndStr("世界"));</script>

layui开源后台管理系统模板集锦

LayUI官方LayAdmin是付费软件:https://www.layui.com/admin/因此在这里简单介绍几款免费开源的基于layui的后台管理系统:很赞后台 http://ok-admin.xlbweb.cn/LayuiMini http://layuimini.99php.cn/X-admin http://x.xuebingsi.com/WeAdmin https://lovetime.gitee.io/weadmin/index.html                 https://lovetime.gitee.io/weadmin/index.html EasyAdmin(付费) https://demo.easyweb.vip/iframe/

三个超实用的移动端触摸滑动js插件

主要有详细文档介绍的还是swiper官网:https://www.swiper.com.cn/其他参考:https://www.25xt.com/html5css3/10868.html