首頁 >web前端 >html教學 >小強的HTML5行動開發之路（32）－ JavaScript回顧7

小強的HTML5行動開發之路（32）－ JavaScript回顧7

黄舟原創: 2017-02-04 14:35:311231瀏覽

BOM模型brower object model(瀏覽器物件模型)，透過瀏覽器內建的一些物件可以操作瀏覽器本身。
DOM是用來操作頁面的，BOM是用來操作瀏覽器本身的。

BOM是沒有規範的，但是大部分瀏覽器都支援以下幾個物件

1、Window物件：表示整個視窗

（1）open方法：（名字，特性，高度寬度，工具列，滾動條）

（2）setTimeout方法：setTimeout(fn, 毫秒); //第一個參數必須是一個函數名稱（不能加括號）

<html>  
    <head>  
        <script>  
            function f1(){  
            //win指向了新打开的窗口   
                    var win = window.open(&#39;day05_03&#39;,&#39;wi_1&#39;,  
                    &#39;width=400,height=400&#39;);  
                    setTimeout(function(){  
                    win.close();  
                }, 5000);         
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me" onclick="f1();"/>  
    </body>  
</html>

（3）setInterval方法

(fn, 毫秒); //在指定的時間間隔後執行某個函數

（4）clearInterval方法

clearInterval(taskId); 警告對話框

（6）confirm()方法

var flag = confirm(string); //string為提示訊息、flag是回傳true或false

（7）prompmpt方法方法prompt(string)

<html>  
    <head>  
        <style>  
            #d1{  
                width:80px;  
                height:80px;  
                background-color:blue;  
                position:relative;  
            }  
        </style>  
        <script src="myjs.js"></script>  
        <script>  
            function f2(){  
                var v1 = parseInt($(&#39;d1&#39;).style.left);  
                $(&#39;d1&#39;).style.left = v1 + 50 + &#39;px&#39;;  
            }  
            function f1(){  
                var taskId = setInterval(f2, 500);  
                setTimeout(function(){  
                    clearInterval(taskId);  
                },5000)  
            }  
        </script>  
    </head>  
    <body>  
        <div id="d1" style="left:10px;"></div>  
        <input type="button" value="click me"  
        onclick="f1();"/>  
    </body>  
</html>

2、Document物件：代表整個文件的根

getElementById(id);

createElement(tagName);

write(string);
3,Location物件：封裝了瀏覽器網址列的相關資訊
href屬性：指定要載入的頁面

reload方法：重新載入目前頁面，相當於刷新

<html>  
    <head>  
        <script>  
            function f3(){  
                var flag = confirm(&#39;你喜欢钱吗？&#39;);  
                alert(flag);  
            }  
            function f4(){  
                var info = prompt(&#39;请输入手机号&#39;);  
                alert(&#39;你输入的手机号是：&#39; + info);  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me"  
        onclick="f4();"/>  
    </body>  
</html>

4,History物件：封裝了瀏覽器已經造訪過的頁面的相關資訊

back():後退
forward():前進
go(參數):正數前進，負數後退

<html>  
    <!-- document对象 -->  
    <head></head>  
    <body style="font-size:30px;">  
        开始输出helloword<br/>  
        <script>  
            for(i=0; i<100; i++){  
                document.write(&#39;hello world<br/>&#39;);  
            }  
        </script>  
    </body>  
</html>

5,Navigator物件：封裝了瀏覽器的相關資訊，(例如：類型，版本)

<html>  
    <!-- location对象 -->  
    <head></head>  
    <body>  
        <input type="button"   
        value="跳转到另外一个页面" onclick="location.href = &#39;day05_04.html&#39;;"/><br/>  
        <input type="button"  
        value="刷新当前页面" onclick="location.reload();"/>  
    </body>  
</html>

<html>  
    <!-- history对象    -->  
    <head></head>  
    <body>  
        <input type="button"  
        value="点这里后退" onclick="history.back();"/>  
        <input type="button"  
        value="点这里前进" onclick="history.forward();"/>  
        <input type="button"  
        value="点这儿后退"  onclick="history.go(-1);"/>  
    </body>  
</html>

6,Screen物件：瀏覽器所在的螢幕的相關資訊

<html>  
    <!--navigator对象-->  
    <head></head>  
    <body>  
        现在访问的浏览器的相关信息如下：<br/>  
        <script>  
        var info;  
        //for in循环：主要用于遍历对象   
            for(propName in navigator){  //propName是任意变量  
        // 将navigator对象的属性名保存到propName变量里  
                info += propName + &#39;;&#39; +navigator[propName] + &#39;<br/>&#39;;  
            }  
            document.write(info);  //在当前页面输出  
        </script>  
    </body>  
</html>

以上就是小強的HTML5行動開發之路（32）－回顧 JavaScript7的內容，更多相關內容是小強的HTML5行動開發之路（32）－回顧請關注PHP中文網（www.php.cn）！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：小強的HTML5行動開發之路（31）－ JavaScript回顧6下一篇：小強的HTML5行動開發之路（31）－ JavaScript回顧6

看更多

小強的HTML5行動開發之路（32）－ JavaScript回顧7

相關文章