Xiaoqiangs mobile HTML5-Entwicklungsstraße (32) – JavaScript-Rezension 7-HTML-Tutorial-php.cn

Xiaoqiangs mobile HTML5-Entwicklungsstraße (32) – JavaScript-Rezension 7

黄舟

Freigeben： 2017-02-04 14:35:31

Original

1208 Leute haben es durchsucht

BOM-Modell Browserobjektmodell (Browserobjektmodell), der Browser selbst kann über einige im Browser integrierte Objekte bedient werden.
DOM wird zum Betrieb der Seite und BOM zum Betrieb des Browsers selbst verwendet.

BOM ist nicht standardisiert, aber die meisten Browser unterstützen die folgenden Objekte

1. Fensterobjekt: stellt das gesamte Fenster dar

(1) open Methode: (Name , Eigenschaften, Höhe und Breite, Symbolleiste, Bildlaufleiste)

(2) setTimeout-Methode: setTimeout(fn, milliseconds); //Der erste Parameter muss ein Funktionsname sein (keine Klammern erlaubt) )

<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>

Nach dem Login kopieren

(3) setInterval-Methode

var taskId = setInterval(fn, milliseconds); //Führen Sie etwas nach der angegebenen Zeitintervallfunktion aus

(4) Methode „clearInterval“

clearInterval(taskId); Box

<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>

Nach dem Login kopieren

(6) Methode „confirm()“

var flag = bestätigen(string); //string ist die Eingabeaufforderungsnachricht, Flag gibt true oder false zurück

(7) prompt method

var info = prompt(string)

2. Dokumentobjekt: stellt den Stamm des gesamten Dokuments dar

<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>

Nach dem Login kopieren

getElementById(id);
createElement(tagName);

write(string); Relevante Informationen am angegebenen Ort ausgeben

3. Standortobjekt: kapselt relevante Informationen der Browser-Adressleiste

href-Attribut: Gibt die zu ladende Seite an

<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>

Nach dem Login kopieren

reload Methode: Lädt die aktuelle Seite neu, was einer Aktualisierung entspricht

4 , History-Objekt: kapselt relevante Informationen über Seiten, die der Browser besucht hat

back(): zurück gehen

<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>

Nach dem Login kopieren

forward( ): vorwärts gehen

go (Parameter): vorwärts mit einer positiven Zahl, zurückgehen mit einer negativen Zahl

5, Navigatorobjekt: kapselt browserbezogene Informationen (z. B : Typ, Version)

<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>

Nach dem Login kopieren

6, Bildschirmobjekt: der Bildschirm, auf dem sich der Browser befindet Zugehörige Informationen

<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>

Nach dem Login kopieren

<html>  
    <!--检测浏览器类型-->  
    <head>  
        <script>  
            function f1(){  
                if((navigator.userAgent).indexOf(&#39;Firefox&#39;)>0){  
                    alert("当前浏览器是Firefox");  
                }else if(navigator.userAgent.indexOf(&#39;MSIE&#39;)>0){  
                    alert("当前浏览器是IE");  
                }else{  
                    alert("其他浏览器");  
                }  
            }     
        </script>  
    </head>  
    <body>  
        <input type="button"  
        value="获得当前浏览器的类型" onclick="f1();"/>  
    </body>  
</html>

Nach dem Login kopieren

<html>  
    <head>  
        <script>  
            function f2(){  
                alert(screen.width + &#39; &#39; +  
                screen.height);  
            }     
        </script>  
    </head>  
    <body>  
        <input type="button"  
        value="获得screen相关信息" onclick="f2();"/>  
    </body>  
</html>

Nach dem Login kopieren

Die Oben ist der Inhalt von Xiaoqiangs mobiler HTML5-Entwicklung (32) – JavaScript Review 7. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!