BOM(一)

記事の目次

.概説

.windowオブジェクト共通イベント

.ウィンドウローディングイベント

2.2ウインドウサイズ変更イベント

.タイマー(開発でよく使われる)

3.1 setTimeout()タイマー

.set Interval()タイマー

3.3停止タイマー

3.4次のカウントダウンの小ケース

を示します.
1.概要

BOM(Browser Object Model)は、ブラウザオブジェクトモデルであり、独立したコンテンツを提供し、ブラウザウィンドウと相互作用するオブジェクトを提供する.

BOMは一連の関連するオブジェクトから構成され、各オブジェクトは多くの方法と属性を提供しており、そのコアオブジェクトはwindowである.

BOMは標準に欠けています.JavaScript文法標準はECMAで、DOMの標準はW 3 Cで、BOMの標準は各ブラウザプロバイダによって規定されています.その互換性は低いです.

DOMとBOMの違いをより直感的に知るために、次の表を作成しました.
DOM
BOM
文書オブジェクトモデル
ブラウザオブジェクトモデル
「ドキュメント」を「対象」として見てください.
【ブラウザ】を【対象】として見てください.
DOMのトップ対象はdocumentです.
BOMのトップターゲットはwindowです.
主に操作ページの要素を学習します.
ブラウザウィンドウの相互作用を学ぶいくつかのオブジェクト
DOMの仕様はW 3 Cです
BOMはブラウザメーカーがそれぞれのブラウザで定義しているので、互換性が悪いです.
2.window対象のよくある事件
BOMはDOMより大きいです.DOMを含んでいます.その構成は以下の通りです.
window
document
location
navigator
screen
history
windowオブジェクトはブラウザのトップターゲットで、二重の役割を持っています.

はJSアクセスブラウザウィンドウのインターフェースです.

はグローバルオブジェクトです.グローバルスコープで定義された変数、関数はいずれもwindowオブジェクトの属性と方法になります.呼び出し時にwindowを省略してもいいです.前の学習のダイアログはすべてwindowオブジェクトの方法です.alert()、prompt()

のようです.
2.1ウィンドウローディングイベント
すべてのドキュメントの読み込みが完了したら、このイベントを起動します.

伝統的な書き方は、低いバージョンのブラウザに適用され、一回しか書けません.複数あれば、最後のwindow.loadを基準として

です.

window.onload = function(){
     }

常用書き方:

window.addEventListener(‘load’,function(){
     })

2.2ウインドウサイズ変更イベント
ウィンドウサイズが変化すると、このイベントが起動され、応答レイアウトでよく使用されます.

window.addEventListener('risize',function(){
     })

3.タイマー(開発でよく使う)
(以下はいずれも方法)
3.1 setTimeout()タイマー
文法:setTimeout( ， )；注意:ここの時間単位はミリ秒の特徴です.一回だけ呼んでアプリケーションを終了します.ウェブページの上で5秒後に広告を閉じます.
3.2 set Interval()タイマー
構文:setInterval( ， )；特徴:間隔を空けてアプリケーションを繰り返し呼び出します.開発においては、カウントダウン機能や、日頃から携帯電話にメールを送り、検証コードのカウントダウンコンポーネントなどを取得するのを待っています.
3.3停止タイマー
第一種類:clearTimeout（timeoutID ）第二種類:clearInterval(timeoutID)3.4次のカウントダウンの実例を挙げます.
カウントダウンは開発にも多く使われています.例えば、京東トップページのカウントダウンモジュールです.

    <script>
        // 1、    
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var settime = +new Date('2021-3-11 17:05:00');//        2021-3-11 17:05:00
        //        ，        
        countdown();
        //      
        setInterval(countdown, 1000);
		//     
        function countdown() {
     
            var nowtime = +new Date();//      
            var times = (settime - nowtime) / 1000;
            //       ，            ，     
            if (times >= 0) {
     
                var h = parseInt(times / 60 / 60 % 24);
                // 0  ，    ，       ，    0，        
                h = h < 10 ? h + '0' : h; 
                hour.innerHTML = h;
                var m = parseInt(times / 60 % 60);
                m = m < 10 ? m + '0' : m;
                minute.innerHTML = m;
                var s = parseInt(times % 60);
                s = s < 10 ? s + '0' : s;
                second.innerHTML = s;
            }
        }
    </script>

今日は先にここまで共有します.もしタイムアウトの完全コードがほしいなら、私もいいです.