javascript BOM對象詳解

目標：本章節將分為9點詳細介紹有關BOM對象的知識點
1.什么是BOM
2.BOM的構成
3.頂級對象window
4.window對象常見事件（頁面加載事件和體調整窗口大小事件）
5.定時器（setTimeout()、setInterval()）
6.this指向問題
7.location對象
8.navigator對象
9.history對象

1.什么是BOM

2.BOM的構成

3.頂級對象window

4.window常用事件

a.頁面或者窗口事件

b.調整窗口大小事件

5.定時器

a.setTimeout()定時器炸彈

b.setInterval()鬧鐘定時器

<div><span class="hour">1</span><span class="minute">2</span><span class="second">3</span> </div><script>// 1. 獲取元素（時分秒盒子） var hour = document.querySelector('.hour'); // 小時的黑色盒子var minute = document.querySelector('.minute'); // 分鐘的黑色盒子var second = document.querySelector('.second'); // 秒數的黑色盒子var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用戶輸入時間總的毫秒數countDown(); // 我們先調用一次這個函數，防止第一次刷新頁面有空白 // 2. 開啟定時器setInterval(countDown, 1000);function countDown() {var nowTime = +new Date(); // 返回的是當前時間總的毫秒數var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數 var h = parseInt(times / 60 / 60 % 24); //時h = h < 10 ? '0' + h : h;hour.innerHTML = h; // 把剩余的小時給 小時黑色盒子var m = parseInt(times / 60 % 60); // 分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60); // 當前的秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script>

6.this指向問題

<button>點擊</button> <script>// this 指向問題 一般情況下this的最終指向的是那個調用它的對象// 1. 全局作用域或者普通函數中this指向全局對象window（ 注意定時器里面的this指向window）console.log(this);function fn() {console.log(this);}window.fn();window.setTimeout(function() {console.log(this);}, 1000);// 2. 方法調用中誰調用this指向誰var o = {sayHi: function() {console.log(this); // this指向的是 o 這個對象}}o.sayHi();var btn = document.querySelector('button');btn.addEventListener('click', function() {console.log(this); // 事件處理函數中的this指向的是btn這個按鈕對象})// 3. 構造函數中this指向構造函數的實例function Fun() {console.log(this); // this 指向的是fun 實例對象}var fun = new Fun(); </script>

總結

以上是生活随笔為你收集整理的javascript BOM对象详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。