Xiaoqiang の HTML5 モバイル開発ロード (32) - JavaScript レビュー 7-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Xiaoqiang の HTML5 モバイル開発ロード (32) - JavaScript レビュー 7

黄舟

Feb 04, 2017 pm 02:35 PM

BOM モデルブラウザオブジェクトモデル (ブラウザオブジェクトモデル)、ブラウザ自体は、ブラウザに組み込まれたいくつかのオブジェクトを通じて操作できます。
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 メソッド

var taskId = setInterval (fn, ミリ秒) ; //指定された時間間隔後に関数を実行します

(4) clearIntervalメソッド

clearInterval(taskId) //setIntervalタスクをキャンセルします

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

ログイン後にコピー

(5)alert()メソッド警告ダイアログボックスをポップアップします

(6) verify() メソッド

var flag = verify(string); //文字列はプロンプト情報、フラグは true または false を返します

(7) プロンプトメソッド

var info =prompt(string)

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

ログイン後にコピー

2. Document オブジェクト: ドキュメント全体のルートを表します

getElementById(id);

createElement(tagName);

write(string); 指定された場所に関連情報を出力します

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

ログイン後にコピー

3, Locationオブジェクト: ブラウザのアドレスバーの関連情報をカプセル化します

href 属性: 読み込むページを指定します
reload メソッド: 現在のページを再読み込みします (リフレッシュに相当します)

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

ログイン後にコピー

4、履歴オブジェクト: ブラウザが訪問したことをカプセル化します過去の関連情報ページ

back(): 戻る
forward(): 進む
go (パラメーター): 正の数値は進む、負の数値は戻る

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

ログイン後にコピー

5、Navigator オブジェクト: ブラウザーの関連情報をカプセル化します (たとえば、 : タイプ、バージョン)

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

ログイン後にコピー

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

ログイン後にコピー

6、Screenオブジェクト: ブラウザが配置されている画面に関する情報

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

ログイン後にコピー

上記はXiaoqiangのHTML5モバイル開発(32)の内容です - JavaScriptレビュー7、その他の関連コンテンツをお願いしますPHP 中国語 Web サイト (www.php.cn) に注意してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。