网站实用的小功能-Window对象

 

  下面主要介绍与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

    网站实用的小功能-Window对象

    点击“黏贴板测试”则将粘贴板的值设为"黏贴板测试,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>

 (复制-粘贴后的)结果:


  网站实用的小功能-Window对象


3.     操作历时记录


  a)    功能函数(相当于)

    ?  window.history.back() 后退一页

    ?  window.history.forward() 前进一页

    ?  window.history.go(int i)前进或后退i页,例如

      window.history.go(-1) 后退一页

      window.history.go(1) 前进一页


  b)   实例

    网站实用的小功能-Window对象


    网站实用的小功能-Window对象



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等)的东西越来越熟悉。

网站实用的小功能-Window对象

上一篇:linux 下搭建php环境


下一篇:uniapp退出应用改变为后台运行