js BOM 一 定時器

2022-09-16 19:30:19 字數 3819 閱讀 5800

(一)瀏覽器物件模型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...