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" οnkeyup="GetPwdMsg()" />
<span id="showPwdMsg"></span>
</body>
</html>
三、禁止文本框输入文字的四种常用方法
<div>方法一:<input type="text" value="禁止文本框输入" οnclick="alert(this.value);" οnfοcus="this.blur()" /></div>
<div>方法二:<input type="text" value="禁止文本框输入" οnclick="alert(this.value);" readonly /> </div>
<div>方法三:<input type="text" value="禁止文本框输入" οnclick="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" οnclick="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" οnclick="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方法,有些是自己写的,也有来源于网络(可能出处无法考证,所以就不贴来源了,不消息侵犯你的版权了,请联系我,我将及时扯下相关代码)。