BlogJava-无所惧，无所悔,为梦想执着的拼搏-文章分类-JavaScript技术文档http://www.blogjava.net/DreamFight/category/36613.htmlzh-cnTue, 01 Mar 2011 06:38:00 GMTTue, 01 Mar 2011 06:38:00 GMT60JS获取浏览器窗口大小 获取屏幕参数http://www.blogjava.net/DreamFight/articles/335559.htmlDreamFightDreamFightTue, 19 Oct 2010 05:01:00 GMThttp://www.blogjava.net/DreamFight/articles/335559.htmlhttp://www.blogjava.net/DreamFight/comments/335559.htmlhttp://www.blogjava.net/DreamFight/articles/335559.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/335559.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/335559.html

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量


IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            
< !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>
            <meta http-equiv="content-type" content="text/html; charset=gb2312">
            </meta></head>
            <body>
            <h2 align="center">请调整浏览器窗口大小</h2><hr />
            <form action="#" method="get" name="form1" id="form1">
            <!--显示浏览器窗口的实际尺寸-->
            浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
            浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
            </form>
            <script type="text/javascript">
            <!--
            var winWidth = 0;
            var winHeight = 0;
            function findDimensions() //函数：获取尺寸
            {
            //获取窗口宽度
            if (window.innerWidth)
            winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
            //获取窗口高度
            if (window.innerHeight)
            winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
            //通过深入Document内部对body进行检测，获取窗口大小
            if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
            {
            winHeight = document.documentElement.clientHeight;
            winWidth = document.documentElement.clientWidth;
            }
            //结果输出至两个文本框
            document.form1.availHeight.value= winHeight;
            document.form1.availWidth.value= winWidth;
            }
            findDimensions();
            //调用函数，获取数值
            window.onresize=findDimensions;
             
            //-->
            </script>
            </body>
            </html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。



DreamFight 2010-10-19 13:01 发表评论
]]>利用js使png透明图像在ie6下正常使用http://www.blogjava.net/DreamFight/articles/335343.htmlDreamFightDreamFightSun, 17 Oct 2010 01:05:00 GMThttp://www.blogjava.net/DreamFight/articles/335343.htmlhttp://www.blogjava.net/DreamFight/comments/335343.htmlhttp://www.blogjava.net/DreamFight/articles/335343.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/335343.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/335343.html 详细进解在下边文件中请下载使用：
http://www.blogjava.net/Files/DreamFight/msiepng.rar

DreamFight 2010-10-17 09:05 发表评论
]]>用js动态改变css样式表http://www.blogjava.net/DreamFight/articles/335342.htmlDreamFightDreamFightSun, 17 Oct 2010 00:48:00 GMThttp://www.blogjava.net/DreamFight/articles/335342.htmlhttp://www.blogjava.net/DreamFight/comments/335342.htmlhttp://www.blogjava.net/DreamFight/articles/335342.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/335342.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/335342.html
第一步：在连接样式表的元素里定义一个id,例如

<link href="1.css" rel="stylesheet" type="text/css" id="css">

我定义的id是css。

第二步：写一个js函数，代码如下：

<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
}
</script>

这个函数的code可以放在页面的任何地方。

第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：

<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>

该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：

在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%


还有一种方法：

<script language="javascript">
var b_v = navigator.appVersion;
var IE6 = b_v.search(/MSIE 6/i) != -1;
var IE7 = b_v.search(/MSIE 7/i) != -1;
if (IE6) {
document.write("<link href=""css/neiye_ie6.css"" rel=""stylesheet"" type=""text/css"" id=""cssStyle"" />");
}else{
document.write("<link href=""css/neiye.css"" rel=""stylesheet"" type=""text/css"" id=""cssStyle"" />");
}
</script>




自动化养鸡设备


DreamFight 2010-10-17 08:48 发表评论
]]>onchange 实现表单动作改变http://www.blogjava.net/DreamFight/articles/323078.htmlDreamFightDreamFightTue, 08 Jun 2010 09:12:00 GMThttp://www.blogjava.net/DreamFight/articles/323078.htmlhttp://www.blogjava.net/DreamFight/comments/323078.htmlhttp://www.blogjava.net/DreamFight/articles/323078.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/323078.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/323078.html

DreamFight 2010-06-08 17:12 发表评论
]]>无缝滚动大全http://www.blogjava.net/DreamFight/articles/319222.htmlDreamFightDreamFightFri, 23 Apr 2010 14:13:00 GMThttp://www.blogjava.net/DreamFight/articles/319222.htmlhttp://www.blogjava.net/DreamFight/comments/319222.htmlhttp://www.blogjava.net/DreamFight/articles/319222.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/319222.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/319222.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> <style type="text/css"> ul,li{margin:0;padding:0;list-style:none;} #tab {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;} .tab_div{float: left;width: 2000px;} #tab1,#tab2{float: left;} #tab1 li,#tab2 li{float:left;margin-right:20px;} </style> </head> <body> 向左滚动 <div id="tab"> <div class="tab_div"> <ul id="tab1"> <li>111111111111111111</li> <li>22222222222222222222222222222</li> <li>333</li> <li>44</li> </ul> <ul id="tab2"></ul> </div> </div> <script type="text/javascript"> <!-- var $d = document; function $i(s){return $d.getElementById(s);} var speed=30; //数字越大速度越慢 var tab=$i("tab"); var tab1=$i("tab1"); var tab2=$i("tab2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth; else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> </body> </html>

红色部分是重点滚动代码，可改为上下左右无缝滚动：
———————–向上滚动——————————-

function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)
tab.scrollTop-=tab1.offsetHeight;
else{
tab.scrollTop++;
}
}

———————–向下滚动——————————-

tab.scrollTop=tab.scrollHeight;
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)
tab.scrollTop+=tab2.offsetHeight;
else{
tab.scrollTop--
}
}

———————–向左滚动——————————-

function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth;
else{
tab.scrollLeft++
}
}

———————–向右滚动——————————-

tab.scrollLeft=tab.scrollWidth;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth;
else{
tab.scrollLeft--
}
}

———————————————————
有一点要注意的是，在实现应用中得算好高度或宽度，不然会出现滚动两次后停止的问题。



DreamFight 2010-04-23 22:13 发表评论
]]>js控制鼠标http://www.blogjava.net/DreamFight/articles/270717.htmlDreamFightDreamFightThu, 14 May 2009 13:44:00 GMThttp://www.blogjava.net/DreamFight/articles/270717.htmlhttp://www.blogjava.net/DreamFight/comments/270717.htmlhttp://www.blogjava.net/DreamFight/articles/270717.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/270717.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/270717.htmlonconTextmenu=window.event.returnValue=false;右键菜单禁用，用这个可以禁止复制。

 

在<body>中加入属性代码：

oncontextmenu="return false"              

onselectstart="return false"                   禁止选中网页上的内容

oncopy="return false"                           防复制用户在网页上选中的内容

 

防止用户另存网页：

利用<noscript><iframe src=*.html></iframe></noscript>标签，能防止网页的直接另存，但不能防止网页被人使用工具下载

*为通配符。

例1：

<html>
<head>
<title>OnContextMenu事件</title>

<script language="JavaScript">
<!--

function uFunction()

{     document.all.infoDiv.innerHTML='你按下了鼠标右键，但是右键菜单不能 显示！';}

function uFunction2()

{    document.all.infoDiv.innerHTML='你按下了Ctrl+鼠标右键，可以 显示右键菜单。';}

//-->

</script>
</head>

<body oncontextmenu="if(!event.ctrlKey){uFunction();return false}else{uFunction2()}">

<div id="infoDiv">你按下了鼠标右键，但是右键菜单不能 显示！<br>你按下了Ctrl+鼠标右键，可以显示右键菜单。
</div></body>
</html>



DreamFight 2009-05-14 21:44 发表评论
]]>鼠标移到表格单元上时，该表格单元的背景变色http://www.blogjava.net/DreamFight/articles/246040.htmlDreamFightDreamFightFri, 12 Dec 2008 13:59:00 GMThttp://www.blogjava.net/DreamFight/articles/246040.htmlhttp://www.blogjava.net/DreamFight/comments/246040.htmlhttp://www.blogjava.net/DreamFight/articles/246040.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/246040.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/246040.html   <tr   onmouseover="changeColor(this)"   onmouseout="this.bgColor='white'"><td   >Line   1</td></tr>  
  <tr   onmouseover="changeColor(this)"   onmouseout="this.bgColor='white'"><td>Line   2</td></tr>  
  <tr   onmouseover="changeColor(this)"   onmouseout="this.bgColor='white'"><td>Line   3</td></tr>  
  </table>  


DreamFight 2008-12-12 21:59 发表评论
]]>js实现浏览器操作http://www.blogjava.net/DreamFight/articles/245964.htmlDreamFightDreamFightFri, 12 Dec 2008 07:35:00 GMThttp://www.blogjava.net/DreamFight/articles/245964.htmlhttp://www.blogjava.net/DreamFight/comments/245964.htmlhttp://www.blogjava.net/DreamFight/articles/245964.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/245964.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/245964.htmlFavorite('http://homepage.yesky.com', '天极网页陶吧')">添加到收藏夹</a> <br><a href="#" onclick=window.external.showBrowserUI("OrganizeFavorites",null)>整理收藏夹</a> <br><a href="#" onclick=window.external.showBrowserUI("PrivacySettings",null)>internet选项</a> <br><a href="#" onclick=history.go(1)>前进1</a><a href="#" onclick=history.forward()>前进2</a><br><a href="#" onclick=history.go(-1)>后退1</a><a href="#" onclick=history.back()>后退2</a><br><a href="#" onclick=setTimeout('window.close()',3000)>3秒关闭本窗口</a><br>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

DreamFight 2008-12-12 15:35 发表评论
]]>JS判断用户电话号码、emialhttp://www.blogjava.net/DreamFight/articles/245770.htmlDreamFightDreamFightThu, 11 Dec 2008 11:08:00 GMThttp://www.blogjava.net/DreamFight/articles/245770.htmlhttp://www.blogjava.net/DreamFight/comments/245770.htmlhttp://www.blogjava.net/DreamFight/articles/245770.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/245770.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/245770.html    var   ErrorInfo="";var email="";var telphone=""; var name=""; var flags=0;  
      email=document.form1.email.value;  
   name=document.form1.linkname.value;  
      telphone=document.form1.linktel.value;  
      //alert(email+"   +   "   +   telphone);
   if     (document.form1.linkname.value=="")   {ErrorInfo   =   ErrorInfo   +   "用户名为空!\n";   flags=1;}    
      if     (document.form1.linktel.value=="")   {ErrorInfo   =   ErrorInfo   +   "电话号码为空!\n";   flags=1;}  
      if     (email!="")   {ErrorInfo   =   ErrorInfo   +   "邮箱地址为空!\n";   flags=1;}  
      if     (isNaN(document.form1.linktel.value))   {ErrorInfo   =   ErrorInfo   +   "电话号码中包含有非数字字符!\n";   flags=1;}  
      if(email!=""){if     (email.lastIndexOf("@")==   -1   ||   email.lastIndexOf(".")   ==   -1)  
                  {ErrorInfo   =   ErrorInfo   +   "邮箱地址不合法!\n地址格式应为emailname@host.   ";   flags=1;}}
      if   (flags){   alert   (ErrorInfo);  return false;} else{
       if((document.form1.linktel.value.length<7) || (document.form1.linktel.value.length>11) ||((document.form1.linktel.value.length>7) && (document.form1.linktel.value.length<11))) {
   if(confirm("系统检测到您的电话号码存在问题，是否继续？"))
   {
    return true;
   }else{
    return false;
   }
  } 
      }

DreamFight 2008-12-11 19:08 发表评论
]]>