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

来源:岁月联盟 编辑:exp 时间:2011-12-30

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>  
<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> www.2cto.com </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> 
<!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> 
<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> 
<!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> 
<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> 
<!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; 
}; 
        //弹出隐藏层
        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"; 
    } 
}; 
        //弹出隐藏层
        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>  
<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>  
<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> 
    <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方法,有些是自己写的,也有来源于网络(可能出处无法考证,所以就不贴来源了,不消息侵犯你的版权了,请联系我,我将及时扯下相关代码)。

 摘自 涂剑凯的专栏