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

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

2021-01-24

键盘输入实时显示搜索结果数据，需要用到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

109 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

242 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

304 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

490 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

1284 0

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

js 跳转至指定邮箱登录页

2019-09-27

938 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

768 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

1648 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

1368 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

1546 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) } }效果图：