javascript学习（三）——常用方法(1)
来源：互联网 发布：电子书阅读软件哪个好 编辑：程序博客网 时间：2024/06/05 18:46
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%;width: 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"> <!-- function getOs() { var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } } alert("您的浏览器类型为:"+getOs()); --> </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方法，有些是自己写的，也有来源于网络（可能出处无法考证，所以就不贴来源了，不消息侵犯你的版权了，请联系我，我将及时扯下相关代码）。
- javascript学习（三）——常用方法(1)
- javascript学习（三）——常用方法(2)
- javascript学习（三）——常用方法(2)
- javascript学习三： 常用对象
- javascript学习笔记—DOM常用API、属性、方法、函数
- 学习ExtJS（三） TextField常用方法
- javascript学习（三） — 数组
- javascript学习之数组（12）—— 数组 常用方法
- javascript学习之日期 字符串（15）—— 时间和日期 常用方法
- javascript学习之日期 字符串（17）—— 字符串 常用方法(上)
- javascript学习之日期 字符串（18）—— 字符串 常用方法(中)
- javascript学习之日期 字符串（19）—— 字符串 常用方法(下)
- JavaScript本地对象常用方法(三)——正则表达式对象
- web学习—javascript学习—函数（三）
- javaScript 常用技巧（三）
- 常用javascript语句（三）
- JavaScript学习（三）
- JavaScript学习（三）
- 用web.xml控制Web应用的行为（5）－2
- C语言符号控制命令表
- windows编程（2）深入探讨MFC消息循环和消息泵
- getAttribute()和getParameter()的区别(二)
- c# 结构体定制特性
- javascript学习（三）——常用方法(1)
- 通过一段汇编，加深对寄存器ESP和EBP的理解
- Excel SendMail
- Silverlight 利用Telerik上传文件
- Attach和Detach的简单说明
- 图--单源最短路径 -Bellman Ford 算法（可以存在负权边的情况和负权回路）算法导论p362
- getAttribute()和getParameter()的区别(一)
- Facade 模式
- PHP下载文件（二）
