BOM(browser object module)
阿新 • • 發佈：2022-01-06
//BOM 瀏覽器物件模型
//它提供了獨立於內容而與瀏覽器視窗進行互動的物件,其核心物件是window
//BOM由一系列的物件構成,並且每個物件都有很多方法和屬性
dom和bom對比:
window.onload = function () { var btn = document.querySelector('button') btn.onclick = function () { alert(111111111) // 點選彈出 } }
//調整視窗大小事件
//2. window.setInterval(呼叫函式,[延遲毫秒數])定時器 // 每隔這個延遲時間,就呼叫這個函式,可以呼叫無數次. //案例: 倒計時案例 var hour = document.querySelector('.hour') var minute = document.querySelector('.minute') var second = document.querySelector('.second') var inputTime = +new Date('2022-1-7 00:00:00') var time1 = null; //全域性變數 null是一個空物件! var begin = document.querySelector('.begin') var stop = document.querySelector('.stop') begin.addEventListener('click', function () { countdown();//先呼叫一次這個函式,防止第一次重新整理頁面時間顯示有空白 time1 = setInterval(countdown, 1000); function countdown() { var nowtime = +new Date()//返回的是當前時間總的毫秒數 var times = (inputTime - nowtime) / 1000;//times是剩餘時間總的秒數 var h = parseInt(times / 60 / 60 % 24);//小時 var m = parseInt(times / 60 % 60); var s = parseInt(times % 60); h = h < 10 ? '0' + h : h; hour.innerHTML = h; m = m < 10 ? '0' + m : m; minute.innerHTML = m; s = s < 10 ? '0' + s : s; second.innerHTML = s; } }) stop.addEventListener('click', function () { clearInterval(time1) }) </script> </body> 傳送簡訊驗證碼案例 <body> 手機號碼: <input type="number"> <button> 傳送</button> <script> //傳送簡訊驗證碼案例 //按鈕點選後,禁用它, disable為true //同時按鈕的內容變化, button需要用innerHTML來修改 //按鈕內容有秒數的變化,因此需要用定時器 //需要定義一個變數在定時器中,不斷遞減 //定時器要停止,並且復原按鈕初始狀態 var btn = document.querySelector('button') var time = 5; btn.addEventListener('click', function () { btn.disabled = true; var timer = setInterval(function () { if (time == 0) { //清除定時器和復原按鈕 clearInterval(timer); btn.disabled = false; btn.innerHTML = '傳送'; time = 5;//這個是計時重新開始 } else { btn.innerHTML = '還剩下' + time + '秒'; time--; } }, 1000) })
//this指向問題: 一般情況下this指向的是那個呼叫它的物件
//1.全域性作用域或普通函式中 this指向全域性物件window (定時器裡面的this也指向window) console.log(this)// window setInterval(function () { // console.log(this) // window }, 2000) //2.方法呼叫中誰呼叫指向誰 var a = { sayHi: function () { // console.log(this) // 指向的是a這個物件 } } a.sayHi(); //3.建構函式中this指向建構函式的例項 function fun() { console.log(this) // this指向的是fn 是fun的例項物件 } var fn = new fun()
</script> </body>
window物件是瀏覽器的定級物件,它有雙重角色:
1.它是js的一個介面;
2.它是一個全域性物件,定義在全域性中的變數和函式,都會變成window物件的屬性和方法
<script>
var num = 111; console.log(num); console.log(window.num); function fn() { console.log(22222) } fn(); window.fn(); console.dir(window) // 裡面有window的方法和屬性 如alert() window.name //特殊屬性, 預設存在,打印出來是空. 所以定義變數一般不用 name作變數名</script>
//window物件的常見事件
<script> //window.onload=function(){ }或者window.addEventListener('load',function(){}) // 這個事件是頁面載入事件,當文件內容全部(包括指令碼,圖片,css檔案等)載入完成就觸發該事件, // 就呼叫的處理函式. //有了這個函式可以把JS程式碼寫到頁面元素的上方 //2 window.onload只能寫一次,有多個以最後一個為準;addEventListener則沒有限制 window.addEventListener('load', function () { alert(2222)// 其次彈出 }) //DOMContentLoaded 是等DOM載入完畢,不包含圖片 css等就可以執行 document.addEventListener("DOMContentLoaded", function () { alert(333333) //最先彈出,而且可以展示js的頁面互動效果. })window.onload = function () { var btn = document.querySelector('button') btn.onclick = function () { alert(111111111) // 點選彈出 } }
//調整視窗大小事件
//2. window.setInterval(呼叫函式,[延遲毫秒數])定時器 // 每隔這個延遲時間,就呼叫這個函式,可以呼叫無數次. //案例: 倒計時案例 var hour = document.querySelector('.hour') var minute = document.querySelector('.minute') var second = document.querySelector('.second') var inputTime = +new Date('2022-1-7 00:00:00') var time1 = null; //全域性變數 null是一個空物件! var begin = document.querySelector('.begin') var stop = document.querySelector('.stop') begin.addEventListener('click', function () { countdown();//先呼叫一次這個函式,防止第一次重新整理頁面時間顯示有空白 time1 = setInterval(countdown, 1000); function countdown() { var nowtime = +new Date()//返回的是當前時間總的毫秒數 var times = (inputTime - nowtime) / 1000;//times是剩餘時間總的秒數 var h = parseInt(times / 60 / 60 % 24);//小時 var m = parseInt(times / 60 % 60); var s = parseInt(times % 60); h = h < 10 ? '0' + h : h; hour.innerHTML = h; m = m < 10 ? '0' + m : m; minute.innerHTML = m; s = s < 10 ? '0' + s : s; second.innerHTML = s; } }) stop.addEventListener('click', function () { clearInterval(time1) }) </script> </body> 傳送簡訊驗證碼案例 <body> 手機號碼: <input type="number"> <button> 傳送</button> <script> //傳送簡訊驗證碼案例 //按鈕點選後,禁用它, disable為true //同時按鈕的內容變化, button需要用innerHTML來修改 //按鈕內容有秒數的變化,因此需要用定時器 //需要定義一個變數在定時器中,不斷遞減 //定時器要停止,並且復原按鈕初始狀態 var btn = document.querySelector('button') var time = 5; btn.addEventListener('click', function () { btn.disabled = true; var timer = setInterval(function () { if (time == 0) { //清除定時器和復原按鈕 clearInterval(timer); btn.disabled = false; btn.innerHTML = '傳送'; time = 5;//這個是計時重新開始 } else { btn.innerHTML = '還剩下' + time + '秒'; time--; } }, 1000) })
//this指向問題: 一般情況下this指向的是那個呼叫它的物件
//1.全域性作用域或普通函式中 this指向全域性物件window (定時器裡面的this也指向window) console.log(this)// window setInterval(function () { // console.log(this) // window }, 2000) //2.方法呼叫中誰呼叫指向誰 var a = { sayHi: function () { // console.log(this) // 指向的是a這個物件 } } a.sayHi(); //3.建構函式中this指向建構函式的例項 function fun() { console.log(this) // this指向的是fn 是fun的例項物件 } var fn = new fun()
</script> </body>