javascript之window对象

来源：互联网发布：php大数据处理编辑：程序博客网时间：2024/05/17 16:55
25. window对象    window对象是BOM的核心，window对象指当前的浏览器窗口。    window对象方法：    计时器、history对象、location对象、navigator对象、screen对象    25.1 JavaScript 计时器    在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。    计时器类型：        一次性计时器：仅在指定的延迟时间之后触发一次。        间隔性触发计时器：每隔一定的时间间隔就触发一次。    计时器setInterval()        在执行时,从载入页面后每隔指定的时间执行代码。        语法:            setInterval(代码,交互时间);        参数说明：            1. 代码：要调用的函数或要执行的代码串。            2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。        返回值:            一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。            调用函数格式(假设有一个clock()函数):                setInterval("clock()",1000)            或                setInterval(clock,1000)        我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>计时器</title>        <script type="text/javascript">            var int=setInterval(clock(), 1000)            function clock(){                var time=new Date();                document.getElementById("clock").value = time;            }        </script>    </head>    <body>        <form>            <input type="text" id="clock" size="50"  />        </form>    </body></html>    取消计时器clearInterval()        clearInterval() 方法可取消由 setInterval() 设置的交互时间。        语法：            clearInterval(id_of_setInterval)        参数说明:            id_of_setInterval：由 setInterval() 返回的 ID 值。    计时器setTimeout()        setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。        语法:        setTimeout(代码,延迟时间);    参数说明：        1. 要调用的函数或要执行的代码串。        2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。取消计时器clearTimeout()    setTimeout()和clearTimeout()一起使用，停止计时器。    语法:        clearTimeout(id_of_setTimeout)    参数说明:        id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。    <script type="text/javascript">        var num=0;        var i;        function startCount(){            document.getElementById('count').value=num;            num=num+1;            i=setTimeout("startCount()",1000);        }        function stopCount(){            clearTimeout(i);        }    </script>25.2 History 对象    history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。    注意:        从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。    语法：        window.history.[属性|方法]        注意：window可以省略。    History 对象属性        length      返回浏览器历史列表中的URL数量    History 对象方法        back()      加载history列表中的前一个URL        forward()   加载history列表中的后一个URL        go()        加载history列表中的某个具体的页面    使用length属性，当前窗口的浏览历史总长度，代码如下：        <script type="text/javascript">            var HL = window.history.length;            document.write(HL);        </script>    返回前一个浏览的页面        back()方法，加载 history 列表中的前一个 URL。        语法：            window.history.back();        比如，返回前一个浏览的页面，代码如下：            window.history.back();            注意：等同于点击浏览器的倒退按钮。            back()相当于go(-1),代码如下:                window.history.go(-1);    返回下一个浏览的页面        forward()方法，加载 history 列表中的下一个 URL。        如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:            window.history.forward();        注意：等价点击前进按钮。        forward()相当于go(1),代码如下:            window.history.go(1);    返回浏览历史中的其他页面        go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。        语法：            window.history.go(number);        参数：            1   前一个，等价forward()            0   当前页面            -1  后一个，等价back()            其他数值    要访问的URL在history的URL列表中的相对位置        浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：            window.history.go(-2);            注意：和在浏览器中单击两次后退按钮操作一样。        同理，返回当前页面之后浏览过的第三个历史页面，代码如下：            window.history.go(3);25.3 Location对象    location用于获取或设置窗体的URL，并且可以用于解析URL。    属性:        hash        设置或返回从井号开始的url        host        设置或返回主机名和当前url的端口号        hostname    设置或返回当前url 的主机名        href        设置或返回完整的url        pathname    设置或返回当前url的路径部分        port        设置或返回当前url的端口号        protocol    设置或返回当前url的协议        search      设置或返回从问号开始的url     方法:        Assiqn()    加载新的文档        Reload()    重新加载当前文档        Replace()   用新的文档替换当前文档25.4 Navigator对象    Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。    对象属性:        appcodename         返回浏览器的代码名        appminorversion     返回浏览器的次级版本        appname             返回浏览器的名称        appversion          返回浏览器的平台和版本信息        browserlanguage     返回当前浏览器的语言        cookieenabled       返回指明浏览器中是否启用cookie的布尔值        cpuclass            返回浏览器系统的cpu等级        online              返回指明系统是否处于脱机模式的布尔值        platform            返回运行浏览器的操作系统平台        systemlanguage      返回os使用的默认语言        useragent           返回由客户机发送服务器的user-agent头部的值        userlanguage        返回os的自然语言设置    方法:        javaenabled()       规定浏览器是否启用java        taintenabled()       规定浏览器是否启用数据污点    查看浏览器的名称和版本，代码如下:    <script type="text/javascript">        var browser=navigator.appName;        var b_version=navigator.appVersion;        document.write("Browser name"+browser);        document.write("<br>");        document.write("Browser version"+b_version);    </script>25.5 screen对象    screen对象用于获取用户的屏幕信息。    语法：        window.screen.属性    属性：        availHeight     窗口可以使用的屏幕高度        availWidth      窗口可以使用的屏幕宽度        colorDepth      用户浏览器表示的颜色位数        height          屏幕高度        width           屏幕宽度    屏幕分辨率的高和宽        window.screen 对象包含有关用户屏幕的信息。        1. screen.height 返回屏幕分辨率的高        2. screen.width 返回屏幕分辨率的宽        注意:            1. 单位以像素计。            2. window.screen 对象在编写时可以不使用 window 这个前缀。        我们来获取屏幕的高和宽，代码如下:    <script type="text/javascript">        document.write( "屏幕宽度："+screen.width+"px<br />" );        document.write( "屏幕高度："+screen.height+"px<br />" );    </script>    屏幕可用高和宽度        1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。        2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。        注意:        不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。        我们来获取屏幕的可用高和宽度，代码如下：<script type="text/javascript">    document.write("可用宽度：" + screen.availWidth);    document.write("可用高度：" + screen.availHeight);</script>        注意:根据屏幕的不同显示值不同。练习<html>    <head>        <title>浏览器对象</title>          <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>       </head>    <body>        <div>操作成功</div>        <div><span id="second">5</span>秒后回到主页<a src="javascript:back()">返回</a></div>        <script type="text/javascript">              var num = document.getElementById("second").innerHTML;              //获取显示秒数的元素，通过定时器来更改秒数。            function count(){                num--;                document.getElementById("second").innerHTML=num;                if(num==0)                {                    location.assign("www.imooc.com");                }            }            setInterval("count()",1000);            //通过window的location和history对象来控制网页的跳转。            function back(){                window.history.back();               }        </script>     </body></html>
0 0