2022-04-14 JavaScript BOM和定時器

悸動戰(zhàn)士小北

BOM(Browser Object Model),中文名稱“瀏覽器對象模型”。和DOM相對應(yīng)跷究,DOM提供的是操作文檔元素的接口,那么BOM提供的就是操作瀏覽器行為的接口敲霍。JavaScript的基礎(chǔ)中俊马,除了基本語法和DOM外丁存,BOM也是十分重要的。本節(jié)主要學(xué)習(xí)BOM的基本操作柴我,了解BOM有哪些特點解寝。

概述

BOM讓我們可以通過JavaScript來操作瀏覽器,為此BOM提供了一些基本的對象來達成這個目標艘儒。

  • window 代表瀏覽器的整個窗口聋伦,也是全局對象,之后的對象可以直接使用界睁,也可以作為window的方法來調(diào)用觉增。
  • navigator 代表瀏覽器的信息,可用于判斷瀏覽器的類型翻斟。(Edg Firefox Chrome等)
  • location 代表瀏覽器的地址欄信息逾礁,用于獲取地址或者讓瀏覽器跳轉(zhuǎn)頁面
  • history 代表瀏覽器的歷史,用于進行瀏覽器頁面的前后跳轉(zhuǎn)访惜。若關(guān)閉瀏覽器后再打開嘹履,則前一次訪問的歷史會被清除。
  • screen 代表用戶屏幕信息债热,可以獲取到用戶的顯示器相關(guān)的信息植捎。

1.navigator

該對象最主要的作用是獲取瀏覽器的信息,識別不同類型的瀏覽器阳柔。歷史原因焰枢,該對象中的大部分方法都不能幫助我們識別瀏覽器,目前我們一般只使用一個方法userAgent舌剂。
該方法的返回值是一個字符串济锄,包含了瀏覽器相關(guān)的信息,簡稱UA霍转。不同瀏覽器的UA都是不同的荐绝,因此它可以作為識別瀏覽器的依據(jù)。

let ua = navigator.userAgent;
console.log("當前瀏覽器的UA是" + ua);//控制臺會打印出瀏覽器相關(guān)信息避消,可以用不同瀏覽器查看低滩,發(fā)現(xiàn)都是不一樣的。

UA中一般會包含有瀏覽器的名稱岩喷,只要匹配到這些名稱我們就可以實現(xiàn)簡單的瀏覽器判別恕沫。要匹配字符串中的特定字符片段,使用正則表達式是最好的纱意。

    if (/Firefox/i.test(ua)) {
        alert("火狐瀏覽器");
    }else if (/chrome/i.test(ua)) {
        alert("chrome瀏覽器");
    }else if (/msie/i.test(ua)) {
        alert("IE瀏覽器");
//碎碎念婶溯,連微軟都要停止支持IE瀏覽器了()

2.location

location中包含有瀏覽器瀏覽的網(wǎng)頁的地址信息,我們依據(jù)這個特性可以實現(xiàn)瀏覽器的跳轉(zhuǎn)。location對象包含一個常用的屬性和三個常用的方法迄委。

  • 屬性 href
console.log(location.href);//打印頁面的URL
location.http://頁面將會自動跳轉(zhuǎn)到百度首頁
  • 方法一:
location.assign(str);//效果和location.href是一樣的褐筛,str是字符串形式的要跳轉(zhuǎn)頁面的地址。

location.assign("https://www.baidu.com");
  • 方法二:
location.reload();//重新加載當前頁面叙身,括號中傳入?yún)?shù)true還會清除緩存并且重新加載頁面
  • 方法三:
location.replace(str)//也是跳轉(zhuǎn)頁面渔扎,和assign不同之處在于會直接替代當前頁面并且不會生成history。

3.history

瀏覽器的歷史信轿。一般的瀏覽器的左上角的位置都有一個這樣的功能區(qū)域晃痴。



點擊它們我們可以實現(xiàn)返回上一個或者下一個我們之前瀏覽過的頁面,history對象也可以實現(xiàn)這樣的功能虏两。這里也主要了解history對象的一個屬性和三個常用方法愧旦。

  • 屬性:
history.length//獲取瀏覽器歷史中URL的數(shù)量世剖,可以理解為訪問的頁面數(shù)量定罢。

這個數(shù)量是單次有效的,也就是說如果中途我們關(guān)閉了瀏覽器再打開旁瘫。這個數(shù)值會被重置為1祖凫。

  • 方法一:
history.back();//返回上個訪問的頁面 類似瀏覽器的  回退  按鈕
  • 方法二:
history.forward();//跳轉(zhuǎn)到下一個訪問到的頁面,類似瀏覽器的  前進  按鈕
  • 方法三:
history.go();//頁面跳轉(zhuǎn)

該方法需要傳入一個整數(shù)作為參數(shù)酬凳,大于零表示向前跳轉(zhuǎn)多少個頁面惠况,小于零表示回退多少個頁面。輸入零則表示重新加載當前頁面宁仔。

定時器

我們在瀏覽一些網(wǎng)站特別是電商網(wǎng)站的時候稠屠,經(jīng)常能看見頁面的某個盒子中的圖片,間隔一定的時間就會切換為其他的圖片翎苫。這就利用了定時器的功能权埠。常見的使用定時器的方法主要有setInterval()和setTimeout()。

setInterval()

該方法的的作用是調(diào)用一段代碼煎谍,循環(huán)執(zhí)行攘蔽,兩次執(zhí)行之間會有一定的時間間隔。方法需要傳入兩個參數(shù)呐粘。

  • 參數(shù)一 回調(diào)函數(shù)满俗,內(nèi)部封裝需要循環(huán)執(zhí)行的代碼。
  • 參數(shù)二 時間間隔作岖,這里的單位為毫秒唆垃。
    例子,實現(xiàn)一個每隔一秒加一的功能
let num = 0;
setInterval(fn, 1000);
     function fn() {
         num++;
         console.log(num);
     };

控制臺每隔一秒就會打印出一個相比上次結(jié)果加一的數(shù)字痘儡。

setTimeout()

該方法會調(diào)用一段代碼降盹,這段代碼不會立即執(zhí)行,而是在等待一定的時間后開始執(zhí)行。參數(shù)和setInterval()一樣有兩個蓄坏。

  • 參數(shù)一 回調(diào)函數(shù)价捧,內(nèi)部封裝代碼。
  • 參數(shù)二 間隔的時間涡戳,代碼等待執(zhí)行的時間结蟋。
    例子二鳄,讓頁面中的一個元素在5秒后消失做修。
<style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
</style>

<body>
<div id="box"></div>
<script>
    let box = document.getElementById("box");
    setTimeout(fn, 5000);
    function fn() {
        box.style.display = "none";
    }
</script>
</body>

fn中的代碼在頁面加載完成的5秒之后才會被執(zhí)行。

清除定時器

實際開發(fā)中顿颅,我們并不希望定時器一直存在恍涂,尤其是setInterval這種定時器宝惰。所以我們需要清除定時器,只需要將set改成clear即可再沧。
定時器的返回值是一個數(shù)字尼夺,它是定時器的唯一標識。我們將這個返回值賦給一個變量炒瘸,然后使用

clearInterval(變量名)

clearTimeout(變量名)

這樣定時器就會被清除淤堵。

總結(jié)

利用定時器的這些功能,改進圖片切換的功能顷扩。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片切換 定時器版本</title>
    <style>
        #img {
            width: 800px;
            height: 500px;
            margin: 100px auto;
            text-align: center;
        }

        img {
            width: 100%;
            height: 100%;

        }
    </style>
</head>
<body>
<div id="img">
    <img src="image/img1.jpg" alt="">
    <button id="start">開始</button>
    <button id="stop">停止</button>
</div>
<script>
    let timer;
    let img = document.getElementsByTagName("img")[0];
    let btn01 = document.getElementById("start");
    let btn02 = document.getElementById("stop");
    let imgArray = ["image/img1.jpg","image/img2.jpg", "image/img3.jpg", "image/img4.jpg"];
    let index = 0;
    btn01.onclick = function () {
        clearInterval(timer);//防止重復(fù)生成定時器
        timer = setInterval(function () {
            img.src = imgArray[index];
            index++
            if (index == imgArray.length) {
                index = 0
            }
        },1000)
    }

    btn02.onclick = function () {
        clearInterval(timer);
    }

</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拐邪,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子隘截,更是在濱河造成了極大的恐慌扎阶,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件婶芭,死亡現(xiàn)場離奇詭異东臀,居然都是意外死亡,警方通過查閱死者的電腦和手機雕擂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門啡邑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人井赌,你說我怎么就攤上這事谤逼。” “怎么了仇穗?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵流部,是天一觀的道長。 經(jīng)常有香客問我纹坐,道長枝冀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮果漾,結(jié)果婚禮上球切,老公的妹妹穿的比我還像新娘。我一直安慰自己绒障,他們只是感情好吨凑,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著户辱,像睡著了一般鸵钝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上庐镐,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天恩商,我揣著相機與錄音,去河邊找鬼必逆。 笑死怠堪,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的末患。 我是一名探鬼主播研叫,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼锤窑,長吁一口氣:“原來是場噩夢啊……” “哼璧针!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起渊啰,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤探橱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后绘证,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體隧膏,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年嚷那,在試婚紗的時候發(fā)現(xiàn)自己被綠了胞枕。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡魏宽,死狀恐怖腐泻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情队询,我是刑警寧澤派桩,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站蚌斩,受9級特大地震影響铆惑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一员魏、第九天 我趴在偏房一處隱蔽的房頂上張望丑蛤。 院中可真熱鬧,春花似錦撕阎、人聲如沸盏阶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽名斟。三九已至,卻和暖如春魄眉,著一層夾襖步出監(jiān)牢的瞬間砰盐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工坑律, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留岩梳,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓晃择,卻偏偏與公主長得像冀值,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子宫屠,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容