javascript学习（三）——常用方法(1)

zoukankan html css js c++ java

javascript学习（三）——常用方法(1)

javascript是一个让人爱恨纠结的语言，不过如果你知道javascript的发明者只用了10天来发明它，也许你就不那么纠结了（JavaScript诞生记）。

一、 js获取页面高度
<script> function getInfo() { var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth; s += " 网页可见区域高："+ document.body.clientHeight; s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"; s += " 网页正文全文宽："+ document.body.scrollWidth; s += " 网页正文全文高："+ document.body.scrollHeight; s += " 网页被卷去的高(ff)："+ document.body.scrollTop; s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop; s += " 网页被卷去的左："+ document.body.scrollLeft; s += " 网页正文部分上："+ window.screenTop; s += " 网页正文部分左："+ window.screenLeft; s += " 屏幕分辨率的高："+ window.screen.height; s += " 屏幕分辨率的宽："+ window.screen.width; s += " 屏幕可用工作区高度："+ window.screen.availHeight; s += " 屏幕可用工作区宽度："+ window.screen.availWidth; s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; } </script>
其他补充说明：点击打开链接

二、密码检测
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <script type="text/javascript"> function CheckPassword(PasswordValue){ var n=0,msg; if (/\d/.test(PasswordValue)) n ++; //包含数字 if (/[a-z]/.test(PasswordValue)) n ++; //包含小写字母 if (/[A-Z]/.test(PasswordValue)) n ++; //包含大写字母 if (/\W/.test(PasswordValue)) n ++; //包含其他字符 if (PasswordValue.length< 5) n=0; //长度小于5位 switch(n){ case 0 : msg=" 密码长度至少6位"; break; case 1 : msg=" 很弱"; break; case 2 : msg=" 中等"; break; case 3 : msg=" 高级"; break; case 4 : msg=" 安全级"; break; } return msg; } function GetPwdMsg(){ //alert(CheckPassword(document.getElementById("Text1").value)); document.getElementById("showPwdMsg").innerHTML=CheckPassword(document.getElementById("Text1").value); } </script> </head> <body> <input id="Text1" type="text" onkeyup="GetPwdMsg()" /> <span id="showPwdMsg"></span> </body> </html>
三、禁止文本框输入文字的四种常用方法

<div>方法一：<input type="text" value="禁止文本框输入" onclick="alert(this.value);" onfocus="this.blur()" /></div> <div>方法二：<input type="text" value="禁止文本框输入" onclick="alert(this.value);" readonly /> </div> <div>方法三：<input type="text" value="禁止文本框输入" onclick="alert(this.value);" disabled /> </div> <div>方法四：<input type="text" value="禁止文本框输入" disabled="disabled"/> </div>

四、倒计时
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <head> <title>实时倒计时</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> </head> <body>  剩余时间：<span id="endtime">10</span> <script type="text/javascript"> var CID = "endtime"; if(window.CID != null) { var iTime = document.getElementById(CID).innerText; var Account; RemainTime(); } function RemainTime() { var iDay,iHour,iMinute,iSecond; var sDay="",sHour="",sMinute="",sSecond="",sTime=""; if (iTime >= 0) { iDay = parseInt(iTime/24/3600); if (iDay > 0) { sDay = iDay + "天"; } iHour = parseInt((iTime/3600)%24); if (iHour > 0){ sHour = iHour + "小时"; } iMinute = parseInt((iTime/60)%60); if (iMinute > 0){ sMinute = iMinute + "分钟"; } iSecond = parseInt(iTime%60); if (iSecond >= 0){ sSecond = iSecond + "秒"; } if ((sDay=="")&&(sHour=="")){ sTime="<span style='color:darkorange'>" + sMinute+sSecond + "</font>"; } else { sTime=sDay+sHour+sMinute+sSecond; } if(iTime==0){ clearTimeout(Account); sTime="<span style='color:green'>时间到了！</span>"; } else { Account = setTimeout("RemainTime()",1000); } iTime=iTime-1; } else { sTime="<span style='color:red'>倒计时结束！</span>"; } document.getElementById(CID).innerHTML = sTime; } </script> </body> </html>

五、全日制时间显示
<html> <head> <title>最简单的全日制时间显示，代码非常简单</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div id="linkweb"> </div> <script>setInterval("linkweb.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000); </script> </body> </html>

六、弹出层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <script type="text/javascript"> //弹出隐藏层 function ShowDiv(show_div,bg_div){ document.getElementById(show_div).style.display='block'; document.getElementById(bg_div).style.display='block' ; document.getElementById(bg_div).style.width = document.body.scrollWidth+"px"; if(document.body.offsetHeight > document.documentElement.clientHeight){ document.getElementById(bg_div).style.height = document.body.offsetHeight+"px"; } else{ document.getElementById(bg_div).style.height = document.documentElement.clientHeight+"px"; } }; //关闭弹出层 function CloseDiv(show_div,bg_div) { document.getElementById(show_div).style.display='none'; document.getElementById(bg_div).style.display='none'; }; </script> <style type="text/css"> .pop_div4{margin-bottom:3px;display:none;position:absolute;background:#FFF;top: 35%;left: 35%; 30%;border:solid 1px #6e8bde;z-index:1002;} .pop_div4 .title{color:#FFF;cursor:default;height:18px;font-size:14px;font-weight:bold;text-align:left;padding-left:8px;padding-top:4px;padding-bottom:2px;background-color:#6e8bde;} .pop_div4 .content{ clear:both; margin:4px; padding:2px; } .Mask_div2{display: none; position: absolute; background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.30;filter: alpha(opacity=80); top: 0%; left: 0%; } </style> </head> <body> <input id="Button2" type="button" value="button" onclick="ShowDiv('pop_div','Mask_div');"/> <div id="pop_div" class="pop_div4"> <div class="title">弹出层</div> <div class="content"> 正文内容 </div> <div style="text-align: right; height:30px; padding-bottom:5px;"> <input value="Close" id="Button1" onclick="CloseDiv('pop_div','Mask_div');" type="button" /> </div> </div> <div id="Mask_div" class="Mask_div2"></div> </body> </html>
在写弹出层的过程中，遇到一个比较纠结的事情，一开始弹出层的JS代码试这么写的
//弹出隐藏层 function ShowDiv(show_div,bg_div){ document.getElementById(show_div).style.display='block'; document.getElementById(bg_div).style.display='block' ; document.getElementById(bg_div).style.width = document.body.scrollWidth; document.getElementById(bg_div).style.height = document.body.offsetHeight; };
却发现这个在IE里面没有问题，到了谷歌火狐，宽度怎么也加不上，始终不明白是什么原因，使用了各种获取网页高度宽度的办法，始终不行。后来发现获取网页高度宽度没有问题，问题出在赋值的时候。就让我更纠结了，这种W3C标准的属性，谷歌和火狐不应该会不支持的啊。

最后突然想到会不会是宽度没有单位的原因，修改如下，果然OK：
//弹出隐藏层 function ShowDiv(show_div,bg_div){ document.getElementById(show_div).style.display='block'; document.getElementById(bg_div).style.display='block' ; document.getElementById(bg_div).style.width = document.body.scrollWidth+"px"; if(document.body.offsetHeight > document.documentElement.clientHeight){ document.getElementById(bg_div).style.height = document.body.offsetHeight+"px"; } else{ document.getElementById(bg_div).style.height = document.documentElement.clientHeight+"px"; } };

七、浏览器类型判断
<script language="JavaScript">  </script>

1、判断浏览器是否为IE
        document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；
        navigator.userAgent.indexOf("MSIE")>0 ? 'IE' : 'others'：navigator.userAgent是描述用户代理信息。
        navigator.appName.indexOf("Microsoft") != -1 ? 'IE' : 'others'：navigator.appName描述浏览器名称信息。
2、判断IE版本
        navigator.appVersion.match(/6./i)=="6." ? 'IE6' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE6；
        navigator.userAgent.indexOf("MSIE 6.0")>0 ? 'IE7' : 'other version'：同上；
        navigator.appVersion.match(/7./i)=="7." ? 'IE7' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE7；
        navigator.userAgent.indexOf("MSIE 7.0")>0 ? 'IE7' : 'other version'：同上；
        navigator.appVersion.match(/8./i)=="8." ? 'IE8' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE8；
        navigator.userAgent.indexOf("MSIE 8.0")>0 ? 'IE8' : 'other version'：同上。
3、JS获取浏览器信息
        浏览器代码名称：navigator.appCodeName
        浏览器名称：navigator.appName
        浏览器版本号：navigator.appVersion
        对Java的支持：navigator.javaEnabled()
        MIME类型（数组）：navigator.mimeTypes
        系统平台：navigator.platform
        插件（数组）：navigator.plugins
        用户代理：navigator.userAgent
4、判断是否IE浏览器之最短的js代码
<script> if(!+[1,])alert("这是ie浏览器"); 　　 else alert("这不是ie浏览器"); </script>

八、火狐浏览器支持window.event

<script type="text/javascript"> if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) { var _E = function(){ var c=_E.caller; while(c.caller)c=c.caller; return c.arguments[0] }; __defineGetter__("event", _E); } </script>

PS：我将不定时在该文章中新增一些常用的JS方法，有些是自己写的，也有来源于网络（可能出处无法考证，所以就不贴来源了，不消息侵犯你的版权了，请联系我，我将及时扯下相关代码）。

查看全文

相关阅读:
mybatis-plus 中的LocalDateTime, LocalDate, LocalTime
mybatis plus 中的Serializable
JavaSE: FileWriter类 & FileReader类
 JavaSE: IO流的概念
 JavaSE: File类
 JavaSE: 自定义异常
 JavaSE: 异常的抛出
 Vocabulary: hoarse
JavaSE: finally的使用
 Vocabulary: appalling

原文地址：https://www.cnblogs.com/bdstjk/p/2519872.html