(一)瀏覽器物件模型bom
bom指整個瀏覽器:
dom指頁面中內容的部分:
一 瀏覽器物件模型bom簡介
1.bom定義:browser object model,瀏覽器物件模型。是操作瀏覽器部分功能的api。
2.bom作用:提供了獨立於內容而與瀏覽器視窗進行互動的物件,比如:怎樣讓滾動條滾動,讓瀏覽器自動滾動,怎樣重新整理頁面,怎樣跳轉到另外乙個頁面等等場景
3.url: internet上的每乙個網頁都具有乙個唯一的名稱標識,通常稱之為url(uniform resource locator, 統一資源定位器)。它是www的統一資源定位標誌,簡單地說url就是web位址,俗稱「**」。
二 bom組成
三 window物件
bom的頂級物件是window。所有物件都是通過它延伸出來的,也可以稱為window的子物件。
1.window是js訪問瀏覽器視窗的乙個介面
通過這個介面,我們可以改變瀏覽器大小、滾動頁面等等
2.window是全域性物件
定義在全域性變數、自定義函式也都是window物件的屬性和方法。
window物件下的屬性和方法呼叫時,可以省略window。如alert()、prompt()等
四 頁面載入事件onload
1.window.onload是視窗(頁面)載入事件
語法:1.window.onload=functino()
2.window.addeventlistener(『load』,function())
上面語句可以放在裡
2.domcontentloades事件
僅當dom元素載入完成(不包括css、、flash)就會觸發,速度比onload快
eg:document.addeventlistener(『domcontentloaded』,function())
3.調整視窗大小事件
(1)語法:window.onresize
1.window.onresize=function()
2.window.addeventlistener(「resize」,function())
(2)作用:常用來完成響應式布局
window.innerheight返回當前視窗的高度
(二) 定時器
一 settimeout():
1.語法:settimeout(呼叫函式,[延遲的毫秒數])
2.工作規則:在定時器到期之後(在毫秒數到了之後)執行呼叫函式。
3.引數:毫秒數單位是毫秒,如果省略則預設是0
呼叫函式可以寫函式,
也可以寫函式名不用寫括號(不用呼叫)
eg1:
settimeout(function(),2000)
;eg2:
function callback()
settimeout(callback,2000); //也可以(』callback()』,2000)不過不提倡
4.區分不同的定時器
設定不同的識別符號
var timer1=settimeout(callback,1000);//會執行,不用再呼叫timer1,timer就是這個定時器的識別符號
var timer2=settimeout(callback,5000);
二 **函式
定義:需要等待時間,時間到了才能呼叫這個函式
比如 callback,click完的fn(){}
二.一 案例:5秒中後自動關閉的廣告
思路:5秒後display:block
imgvar ad=document.queryselector('.ad');
settimeout(function(),2000)
三 停止settimeout定時器
用:cleartimeout
語法:cleartimeout( id_of_settimeout)用於重置js定時器。
eg:var timer1=settimeout(callback,1000);//注意:timer需要是全域性變數
btn.addeventlistener(『click』,function())
四 setinterval
1.機制:迴圈呼叫。將一段**,每隔一段時間執行一次
2.語法:setinterval(**函式,時間間隔 )
3.引數:毫秒數單位是毫秒,如果省略則預設是0
呼叫函式可以寫函式,
也可以寫函式名不用寫括號(不用呼叫)
eg1:
setinterval(function(),2000);
eg2:
function callback()
setinterval(callback,2000); //也可以(』callback()』,2000)不過不提倡
4.區分不同的定時器
設定不同的識別符號
var timer1=setinterval(callback,1000);//會執行,不用再呼叫timer1,timer就是這個定時器的識別符號
var timer2=setinterval(callback,5000);
四.一 定時器效果
布局:三個黑色盒子分別放時分秒,分別利用innerhtml放入計算的小時分鐘秒數
思路:計時不斷變化,通過定時器setinterval來實現
div
span 12
3var hour = document.queryselector('.hour');
var minute = document.queryselector('.minute');
var second = document.queryselector('.second');
var inputtime = +new date('2021-1-1 00:00:00');
countdown();//因為要一秒後才能呼叫定時器,可是我們想一重新整理就顯示出來,所以就要先呼叫一次countdown函式,否則就要等到定時器數完1秒後才能顯示出來 總結:想一重新整理就顯示出來,不用等定時器進行一次即使之後再顯示出來,就要在前面呼叫一下這個函式
setinterval(countdown, 1000);
//倒計時
function countdown(time)
五 停止setinterval定時器
用clearinterval
var timer=null;//注意:timer需要是全域性變數
btn1.addeventlistener(『click』,function());
btn2.addeventlistener(『click』,function())
五.一 案例:定時傳送簡訊
場景:點選按鈕後,60s之內不能再點選,防止重**送簡訊
思路:按鈕點選之後,會禁用按鈕 disabled為true
同時按鈕裡面的內容會發生變化:button裡面的內容通過innerhtml修改
裡面的秒數會發生變化:用定時器
方法:定義乙個變數,在定時器裡面不斷遞減. 如果變數為0說明到了時間,需要停止定時器,並且復原按鈕初始狀態
手機號碼:
傳送var btn = document.queryselector('button');
var time=3;
btn.addeventlistener('click',function()else
},1000)
})
JS BOM 定時器(附原始碼案例)
呼叫方法 方法1 匿名函式。setinterval function 1000 方法2 以字串形式新增 一般沒人用這種方法 setinterval console.log 方法2 1000 方法3 函式名 setinterval fn,1000 function fn 2.1定時器的返回值是定時器的...
Qt使用定時器方法一 定時器事件
首先,qt物件的基類qobject為我們提供了乙個基本的定時器,它是通過定時器事件來觸發的。其步驟如下 step1 通過函式int qobject starttimer int interval 函式來啟動乙個定時器,其中引數interval為時間間隔,其時間單位為毫秒 ms starttimer ...
JavaScript學習筆記(一) 定時器
1.標準格式 window.setinterval 執行的 串 間隔時間 2.常見形式 setinterval 直接是操作 間隔時間 setinterval function,間隔時間 外調式 setinterval func 間隔時間 內嵌式 3.開啟和關閉定時器的示例 開始定時器 關閉定時器 1...