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%;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方法，有些是自己写的，也有来源于网络（可能出处无法考证，所以就不贴来源了，不消息侵犯你的版权了，请联系我，我将及时扯下相关代码）。

posted @ 2011-11-25 14:04 bdstjk 阅读(258) 评论(0) 编辑收藏举报

刷新页面返回顶部

冰风On The Way

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

公告