JavaScript,js学习教程,,javascript问题集合

js判断网站URL是不是首页或者是404页面

2021-04-15

我们网站有时需要做统一跳转，比如除了首页不跳转外，其他都跳转至某个链接。这样最简单的方法就是判断URL了，通过获取URL来判断。判断是否是首页 varlocalUrl=window.location.href; varregex=newRegExp("^https?://(test-)?www\.tpxhm.com(/?|/index[(.|_)].*|/?[?].*)$","i"); if(regex.test(localUrl)==true){ //是首页，执行相应操作 } 该结果会返回true和false，为true时即为首页页面判断是否是404页面 varlocalUrl=window.location.href; varregex=newRegExp("^https?://(test-)?www\.tpxhm.com(/?|/index[(.|_)].*|/?[?].*)$","i"); if(regex.test(localUrl)==true){ //是404，执行相应操作 } 该结果会返回true和false，为true时即为404页面

前端三大主流框架分别有哪些、优劣势

2021-04-11

227 0

前端三大主流框架分别有哪些？Angular.js：出来较早的前端框架，学习曲线比较陡， NG1学起来比较麻烦， NG2~NG5开始，进行了一系列的改革，也提供了组件化开发的概念；从NG2开始，也支持使用TS(TypeScript) 进行编程；Vue.js：最火的一门前端框架，它是中国人开发的，对我我们来说，文档要友好一些；Reacts：最流行的一门框架，因为它的设计很优秀；开发团队方面React是由FaceBook前端官方团队进行维护和更新的；因此， React的维护开发团队，技术实力比较雄厚；Vue：第一版，主要是有作者尤雨溪专门进行维护的，当Vue更新到2.x版本后，也有了一个以尤雨溪为主导的开源小团队，进行相关的开发和维护；社区方面在社区方面， React由于诞生的较早，所以社区比较强大，一些常见的问题、坑、最优解决方案，文档、博客在社区中都是可以很方便就能找到的；Vue是近两年才火起来的，所以，它的社区相对于React来说，要小一些，可能有的一些坑，没人踩过；移动APP开发体验方面Vue，结合Weex这门技术，提供了迁移到移动端App开发的体验(Weex，目前只是一个小的玩具，并没有很成功的大案例；)React，结合React Native，也提供了无缝迁移到移动App的开发体验(RN用的最多，也是最火最流行的) ；为什么要学习React1.和Angular 1相比， React设计很优秀，一切基于JS并且实现了组件化开发的思想；2.开发团队实力强悍，不必担心断更的情况；3.社区强大，很多问题都能找到对应的解决方案；4.提供了无缝转到React Native上的开发体验，让我们技术能力得到了拓展；增强了我们的核心竞争力；5.很多企业中，前端项目的技术选型采用的是React.js；

js判断用户请求是http还是https

2021-03-17

271 0

有时我们需要判断用户请求是http还是https，来做一些操作。这时可以使用下面的方法来判断 //protocol属性是一个可读可写的字符串，可设置或返回当前URL的协议,所有主要浏览器都支持protocol属性 varishttps='https:'==document.location.protocol?true:false; if(ishttps){ console.log('http') }else{ console.log('http') }

js获取input监听文本框值，判断非空示例

2021-01-24

303 0

键盘输入实时显示搜索结果数据，需要用到input监听文本框输入的值，然后请求后端数据，以下个简单的方法，共大家参考。 Document .pop{display:none;} 不能为空 $('#input').on("input",function(){ 　　console.log($(this).val().length);//打印输入框字符长度 if($(this).val().length==0){ $(".pop").show().delay(5000).hide(100); }else{ //请求数据 } });

js正则获取字符串中url链接地址方法

2021-01-20

301 0

在开发过程中需要匹配字符串中的手机号，可以使用以下方法来实现提取字符串中的手机号。//正则匹配匹配url functionhttpString(s){ varreg=/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; varreg=/(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g; s=s.match(reg); //console.log(s[0]) return(s[0]) }

javascript实现显示活动倒计时时间

2020-11-30

449 0

效果预览：https://www.tpxhm.com/mdetail/4.html活动倒计时，我们在很多APP中或者购物网站经常可以看到，比如京东、淘宝、拼多多等。以下是一个简单的实现动态倒计时功能，只需传入当前时间即可。代码实现 Title window.onload=functionovertime(){ varj=setTimeout(overtime,1000); //创建时间 vardate=newDate(); //获取年月日小时分钟秒 //设置结束时间 varsys_starttime="2020/11/2110:02:00" vardateb=newDate(sys_starttime); //接受结束时间 varstr=dateb.getTime(); //时间差 varLiftTime=str-date; //倒计时时间 vard,h,m,s; d=Math.floor(LiftTime/1000/60/60/24); h=Math.floor(LiftTime/1000/60/60%24); m=Math.floor(LiftTime/1000/60%60); s=Math.floor(LiftTime/1000%60); if(LiftTime>1){ document.getElementById("m").innerHTML='简忆博客提醒您：本活动还有'+''+d+'天'+''+h+''+'小时'+''+m+'分钟'+''+s+'秒结束'; } else{ document.getElementById("m").innerHTML='本次活动已结束'; clearInterval(j) } }

网页实现未加载完毕显示loading效果

2020-10-19

506 0

当网页页面加载文件、或者图片过多是，要等很久才打开，解决方法是增加服务器配置，但是没条件的话，可以考虑通过js判断页面是否加载完毕，加载完毕后在显示内容，没加载完毕显示加载中，这种在H5邀请函中经常看见。以下是实现方法，供大家参考。loading.js判断页面是否在家完毕，未加载完毕显示loading效果var_PageHeight=document.documentElement.clientHeight, _PageWidth=document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var_LoadingTop=_PageHeight>61?(_PageHeight-61)/2:0, _LoadingLeft=_PageWidth>215?(_PageWidth-215)/2:0; //在页面未加载完毕之前显示的loadingHtml自定义内容 var_LoadingHtml=''; //呈现loading效果 document.write(_LoadingHtml); //监听加载状态改变 document.onreadystatechange=completeLoading; //加载状态为complete时移除loading效果 functioncompleteLoading(){ if(document.readyState=="complete"){ varloadingMask=document.getElementById('loadingDiv'); loadingMask.parentNode.removeChild(loadingMask); } }loading样式设置#loadingDiv{position:absolute;left:0;width:100%;top:0;background:#fff;z-index:10000} #loadingDivdiv{position:absolute;width:auto;height:105px;padding-left:215px;background:#fffurl(../images/loading.gif)no-repeatcentercenter/50px50px}loading图片下载

JavaScript实现console控制台显示彩色文字，版权信息方法

2020-08-26

692 0

介绍这个方法之前我们来看下百度的控制台，打开百度网页https://www.baidu.com 按下F12,选择console控制台，可以看到很有趣的百度招聘信息。再来看下大家耳熟的B站https://www.bilibili.com/其次打开博主的网站控制台：可以看到网站名称，qq等信息。看到这里是不是很有趣，我们来看看如何弄这种效果。主要用到这句代码：window.console&&(console.groupCollapsed("%c简忆博客","color:#FF6666;font-size:20px;font-weight:300"),console.groupEnd())console.groupCollapsed()方法表示折叠信息组的开始。与console.group()不同，新创建的组是折叠的。用户需要使用它旁边的显示按钮来展开它，显示在组中创建的条目。调用console.groupEnd()返回到父组。最后介绍另一种，在控制台加图片：(图片路径换成自己的即可，大小通过font-size设置)console.log("%c\n","font-size:120px;background:url('http://www.baidu.com/2017/images/logo.jpg')no-repeat0-20px");

js 点击当前点击元素增加样式

2019-10-11

1545 0

在按钮点击中，只想对当前点击的元素增加样式，其他元素样式取消。js写法为：$(".rebpacketulli").click(function(){ varindex=$(this).index(); $(this).addClass("on").siblings().removeClass("on"); });

js 跳转至指定邮箱登录页

2019-09-27

1147 0

//跳转到指定的邮箱登录页面 $(".nowloginenami").click(function(){ varuurl="554344442@qq.com" uurl=gotoEmail(uurl); if(uurl!=""){ window.location.href="http://"+uurl }else{ alert("抱歉!未找到对应的邮箱登录地址，请自己登录邮箱查看邮件！"); } }); //功能：根据用户输入的Email跳转到相应的电子邮箱首页 functiongotoEmail($mail){ $t=$mail.split('@')[1]; $t=$t.toLowerCase(); if($t=='163.com'){ return'mail.163.com'; }elseif($t=='vip.163.com'){ return'vip.163.com'; }elseif($t=='126.com'){ return'mail.126.com'; }elseif($t=='qq.com'||$t=='vip.qq.com'||$t=='foxmail.com'){ return'mail.qq.com'; }elseif($t=='gmail.com'){ return'mail.google.com'; }elseif($t=='sohu.com'){ return'mail.sohu.com'; }elseif($t=='tom.com'){ return'mail.tom.com'; }elseif($t=='vip.sina.com'){ return'vip.sina.com'; }elseif($t=='sina.com.cn'||$t=='sina.com'){ return'mail.sina.com.cn'; }elseif($t=='tom.com'){ return'mail.tom.com'; }elseif($t=='yahoo.com.cn'||$t=='yahoo.cn'){ return'mail.cn.yahoo.com'; }elseif($t=='tom.com'){ return'mail.tom.com'; }elseif($t=='yeah.net'){ return'www.yeah.net'; }elseif($t=='21cn.com'){ return'mail.21cn.com'; }elseif($t=='hotmail.com'){ return'www.hotmail.com'; }elseif($t=='sogou.com'){ return'mail.sogou.com'; }elseif($t=='188.com'){ return'www.188.com'; }elseif($t=='139.com'){ return'mail.10086.cn'; }elseif($t=='189.cn'){ return'webmail15.189.cn/webmail'; }elseif($t=='wo.com.cn'){ return'mail.wo.com.cn/smsmail'; }elseif($t=='139.com'){ return'mail.10086.cn'; }else{ return''; } };

封装GetQueryString()方法来获取URL的值

2019-09-26

972 0

代码如下：(说明：获取的是当前页面的URL；这里测试需要在后边自己手动添加 ?name=xiangruding&sex=nuuu&age=90)； varname=GetQueryString("name"); varsex=GetQueryString("sex"); varage=GetQueryString("age"); console.log("name="+name); console.log("sex="+sex); console.log("sex="+age); functionGetQueryString(name){ varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)"); varr=window.location.search.substr(1).match(reg); if(r!=null) returndecodeURI(r[2]); returnnull; }

JavaScript异步加载，document.write页面空白问题如何解决？

2019-04-17

1865 0

1、Dom元素加载是在文档流中执行的。当最后一行加载出来后。文档流就关闭了。document.close().2、文档流关闭后，如果再去执行document.write()。因为document没有文档流了无法write.所以就会重新document.open()一个新的文档流。导致之前的页面内容被清空。由此可知。在页面加载完毕后再次使用document.write()会导致页面空白。怎么办呢？以下提供解决方法：varhead=document.getElementsByTagName('head')[0]; varscript=document.createElement('script'); script.src='feature.js'; head.appendChild(script);例如，我们只想给那些满足一定条件的用户加载某个脚本，也就是经常提到的“懒加载”。

JS 循环遍历JSON数据

2019-04-13

1676 1

JSON数据如：{"options":"[{/"text/":/"张三/",/"value/":/"9/"},{/"text/":/"李四/",/"value/":/"10/"},{/"text/":/"王五/",/"value/":/"13/"}]"}用js可以写成：vardata=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; for(varoindata){ console.log("text:"+data[o].name+"value:"+data[o].age); }实例：结合ajaxhtml代码：注意引入jquery $(function(){ $.ajax({ //请求方式 type:'GET', //发送请求的地址 url:'http://www.tpxhm.com/index/H5luck/h5_list', //服务器返回的数据类型 dataType:'json', //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式 data:'', success:function(data){ for(varpindata){ vararr=Number(p)+Number(1); $('.lsit').append(''+data[p].nickname+''+data[p].tel+'奖品：'+data[p].cons+''+arr+'') } }, error:function(jqXHR){ //请求失败函数内容 } }); })

js 短信60秒倒计时

2019-03-21

1820 0

Javascript 实现点击按钮倒计时60秒方可再次点击发送的效果 Document 获取短信验证码 Javascript代码：varcountDownT=60; functionget_sms_captcha(type){ countDownT=60; setTime(); //下方写业务 } functionsetTime(){ if(countDownT==0){ $("#gSMS").attr("onclick","get_sms_captcha('2')"); $("#gSMS").text("获取短信验证码"); }else{ $("#gSMS").attr("onclick","#"); $("#gSMS").text("重新发送("+countDownT+")"); countDownT--; setTimeout(function(){ setTime(); },1000) } }效果图：