下面主要介绍与window对象相关的几个小功能,以我们平时在网站中常见的一些效果作为实例。
首先要知道window对象代表当前浏览器窗口,使用window对象的属性、方法时可以省略前面的“window .”,例如一般将window.alert(‘ ’)直接写为alert( )。
1. 操作定时器
a) 有两种选择:
? setInterval( hander , timeout );每隔一段时间执行指定的代码,相当于计时器Timer控件。
? setTimeout( hander , timeout );与上面的方法原理相似,但指定的代码只执行一次,不会像上面方法那样不停的重复执行。
b) 下面以setInterval方法为例进行介绍:
? 第一个参数为要计时执行的代码,第二个参数为间隔的时间(单位毫秒);返回值为计时器的唯一标识。
? 要取消定时器,用clearInterval(id),它与setInterval是相对的。每开启一个定时器,就会返回一个与之对应的唯一的id,而要停止定时器就必须要用的此id,即clearInterval(id)。
例如:开启定时器 var interId=setInterval(“alert(‘hello’)”,1000);
关闭定时器clearInterval(interId)
c) 实例—常见的“走马灯效果”:
下面简单的实现网页“标题栏的走马灯效果”,即网页的标题每隔500ms向右滚动一下。代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>北京欢迎你</title> <script type="text/javascript"> function scroll() { var title = document.title;//取得网页标题title var firstChar = title.charAt(0);//取得标题第一个文字 var leftChars = title.substring(1, title.length );//取得标题其它文字 document.title = leftChars + firstChar;//将第一个文字,置于标题的最后 } </script> </head> <body> <form id="form1" runat="server"> <div> <%--点击"开始滚动"则开启定时器,每隔500s执行一次scroll函数(需要注意,每点击一次都会开启一个新的定时器)--%> <input type="button" value="开始滚动" onclick="timeId=setInterval(‘scroll()‘,500);" /> <%--点击"停止滚动"则清除上面的定时器--%> <input type ="button" value ="停止滚动" onclick ="clearInterval(timeId);" /> </div> </form> </body> </html>
2. 操作粘贴板
a) 需要操作的是clipboardData对象(下面的“Text”是固定的,不能设为其它值)
? setData(“Text”,data),设置粘贴板的值
? getData(“Text”),读取粘贴板的值
? clearData(“Text”),清空粘贴板.
b) 在某些时候,我们还经常使用“禁止复制”、“禁止粘贴”的功能:
? 只需要将元素的oncopy、onpaste事件的值设为”return false”即可,例如:
这样无论“右击-复制”还是ctrl+c都无法进行复制。
c) 实例-1
点击“黏贴板测试”则将粘贴板的值设为"黏贴板测试,hello world";点击“复制网址”则将其内容设为,本网页的地址。源码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function test1() { //alert(window.screen.width + " " + window.screen.height + " " + location.href); clipboardData.setData("Text", location.href); alert("成功复制URL"); } function test2() { clipboardData.setData("Text", "黏贴板测试,hello world"); alert(clipboardData.getData("Text")); } </script> </head> <body oncopy="alert(‘禁止复制‘);return false"> <form id="form1" runat="server"> <div> <input type ="button" value ="复制网址" onclick="test1()" /> <input type ="button" value ="黏贴板测试" onclick="test2()" /> </div> </form> </body> </html>
d) 实例-2
为了防止一些人在复制自己的文章时,不添加文章来源,自动再复制的内容后面添加版权声明。源码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>粘贴板测试2</title> <script type ="text/javascript" > function modifyClipboard() { var txt = clipboardData.getData("Text"); txt = txt + "本文来自……技术网站" + window.location.href; clipboardData.setData("Text", txt); } </script> </head> <!--注意,不能在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒后执行--> <body oncopy="setTimeout(‘modifyClipboard()‘,100);"> <p>kobe bryant never stop trying!</p> </body> </html>
(复制-粘贴后的)结果:
3. 操作历时记录
a) 功能函数(相当于)
? window.history.back() 后退一页
? window.history.forward() 前进一页
? window.history.go(int i)前进或后退i页,例如:
window.history.go(-1) 后退一页
window.history.go(1) 前进一页
b) 实例
4. window.event
? window.event非常重要。它用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。就像winForm中的参数e(EventArg).例如:
? altKey属性(bool类型)表示事件发生时是否按下了alt键,类似的还有ctrlKey、shiftKey。如:onclick=”if(event.altKey){alert(‘Alt点击’)}else{alert(‘普通点击’)}”。
? clientX、clientY发生事件时鼠标在客户区的坐标;screenX、screenY获得发生事件时鼠标在屏幕上的坐标;offsetX、offsetY获得发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。
? returnValue属性,如果将returnValue设为false,就会取消默认事件的处理。
? srcElement,获得事件源对象(很重要)。
? keyCode,获得发生事件时的按键值。
? button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按下。例,<body onmousedown=”if(event.button==2){alert(‘禁止复制’);}”>
总结
很多小功能曾经很频繁的在浏览网站时看到--如何架广告,网站数据统计(CNZZ),禁用复制、粘贴等等。现在自己也都可以亲手实现,感觉现在对网站前端(html、js等)的东西越来越熟悉。