前言
本篇文章是JavaScript
基礎知識的BOM
篇,如果前面的《JavaScript基礎知識-DOM篇》看完了,現在就可以學習BOM
了。
注意: 所有的案例都在這里鏈接: 提取密碼密碼: yvxo
,文章中的每個案例后面都有對應的序號。
1. BOM 基本概念
BOM
(Browser Object Model):瀏覽器對象模型,提供了一套操作瀏覽器的工具。
BOM
中包含的內容很多,但是有很多東西是用不到的。在BOM
中我們需要掌握定時器
。
2. window 對象
-
window
對象是一個全局對象,也可以說是JavaScript
中的頂級對象 - 像
document
、alert()
、console.log()
這些都是window
的屬性,其實BOM
中基本所有的屬性和方法都是屬性window
的。 - 所有定義在全局作用域中的變量、函數都會變成
window
對象的屬性和方法 -
window
對象下的屬性和方法調用的時候可以省略window
示例代碼: [01-window對象.html]
普通函數調用的時候:
var name = "項羽";
var age = "28";function Teacher() {this.name = "虞姬";this.age = 22;console.log(this);
}
// 沒有 new 的時候就相當于普通函數調用
var obj = Teacher(); // 打印的this 指的是全局對象window
console.log(name); // 虞姬
console.log(age); // 22
/*
為什么會是 虞姬 和 22 ? 不是定義了一個全局變量name = "項羽"嗎?
因為 Teacher作為一個普通函數調用,它里面的this指的就是全局對象
js 代碼一步步往下執行,一開始是定義了一個name="項羽"的全局變量,
但是下面的this有將"虞姬"指向了全局對象,所以最后打印的是虞姬 22
*/
構造函數的時候:
var name = "項羽";
var age = "28";function Teacher() {this.name = "虞姬";this.age = 22;console.log(this);
}
// 沒有 new 的時候就相當于普通函數調用
var obj = new Teacher(); // 打印的this 指的是構造函數對象 Teacher
console.log(name); // 項羽
console.log(age); // 28
/*
Teacher作為構造函數的時候,它內部的this指向的是 對象Teacher
此時的全局變量name="項羽" 將不會再受this的影響,所以,打印的是 項羽 28
*/
2.1 window.onload
window.onload
事件會在窗體加載完成后執行,通常我們稱之為入口函數
。
window.onload = function(){//里面的代碼會在窗體加載完成后執行。//窗體加載完成包括文檔樹的加載、還有圖片、文件的加載完成。
}
注意:
- 如果有圖片加載,那么代碼一定要寫到
window.onload
里面,否則會出現圖片沒有加載完成,獲取到的寬度和高度不對的情況。 - 瀏覽器會對頁面的加載做優化,在加載圖片的時候,圖片的引入會延遲。
- 一個頁面中不能有兩個
onload
函數,寫在下面的會覆蓋掉上面的。
示例代碼: [02-window.onload對象(一)]
為什么下面的代碼會報錯呢?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>window.onload</title><!-- script寫在上面直接報錯 --><!-- 因為代碼是一步步向下執行的,在head里的script獲取btn或者box的時候,是獲取不到的,因為下面的頁面結構還沒加載到:--><script>var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function() {box.style.width = "500px";box.style.height = "500px";}</script>
</head><body><button id="btn">按鈕</button><div id="box" style="width:200px;height:200px;background:pink;"></div>
</body></html>
此時就可以用window.onload
入口函數:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>window.onload</title><script>// 這里定義了一個入口函數,就是說等頁面所有文檔樹加載完才會執行這里面的代碼:window.onload = function() {var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function() {box.style.width = "500px";box.style.height = "500px";}}</script>
</head><body><button id="btn">按鈕</button><div id="box" style="width:200px;height:200px;background:pink;"></div>
</body></html>
示例代碼:圖片加載 [03-window.onload對象(二)]
為什么獲取的寬度和高度都為0
呢,js
代碼不是寫在最后面了嗎?
<body><!-- html 部分--><img id="img" src="../image/levi.jpg" alt=""><!-- js 部分 --><script>var img = document.getElementById('img');console.log(img.width); // 0console.log(img.height); // 0</script>
</body>
效果圖:
這是因為,瀏覽器會對頁面的加載做優化,在加載圖片的時候,圖片的引入會延遲。這時候需要用window.onload
:
<head><script>// 當文檔加載完成的時候執行,如果有圖片,等到圖片也加載完成才會執行。window.onload = function() {var img = document.getElementById('img');console.log(img.width);console.log(img.height);}</script>
</head><body><img id="img" src="../image/levi.jpg" alt="">
</body>
效果圖:
2.2 window.open
window.open()
打開一個窗口
語法:window.open(url, [name], [features]);
參數1:需要載入的url地址
參數2:新窗口的名稱_self:在當前窗口打開_blank:在新的窗口打開
參數3:窗口的屬性,指定窗口的大小
返回值:會返回剛剛創建的那個窗口,用于關閉
示例代碼: [04-window.open.html]
<!-- html 部分 -->
<button id="btn">點擊在新窗口跳轉到百度</button>
<button id="btn2">點擊在本窗口跳轉到百度</button><!-- js 部分 -->
<script>var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');btn.onclick = function() {// 在新窗口打開,新窗口的大小為300 * 300var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");}btn2.onclick = function() {// 在當前窗口打開,新窗口的大小根據當前窗口改變的,設置的無效var newWin = window.open("http://www.baidu.com", "_self");}
</script>
效果圖:
2.3 window.close
window.close()
關閉一個窗口 在火狐瀏覽器下會失效解決辦法
newWin.close();//newWin是剛剛創建的那個窗口
window.close(); //把當前窗口給關閉了
示例代碼: [05-window.close.html]
<!-- html 部分 -->
<button id="btn">點擊在新窗口跳轉到百度</button>
<button id="btn2">點擊在本窗口跳轉到百度</button>
<button id="btn3">點擊關閉打開的新窗口</button>
<button id="btn4">點擊關閉本窗口</button><!-- js 部分 -->
<script>var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');btn.onclick = function() {// 在新窗口打開,新窗口的大小為300 * 300var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");btn3.onclick = function() {// 關閉打開的新窗口newWin.close();}}btn2.onclick = function() {// 在當前窗口打開,新窗口的大小根據當前窗口改變的,設置的無效var newWin2 = window.open("http://www.baidu.com", "_self");}btn4.onclick = function() {// 關閉本窗口window.close();}
</script>
效果圖:
3. 定時器
定時器里面不能用this
,因為在定時器里面,this
,指向的是全局對象window
。
3.1 延時定時器
延時定時器可以讓代碼延遲一段時間之后才執行。定時器不是我們調用,我們只需要把函數的地址傳過去,時間到了,window
會自己調用。
1、設置延時定時器
語法:setTimeOut(callback, time);
參數1:回調函數,時間到了就會執行。
參數2:延時的時間 單位:毫秒
返 回:定時器的id,用于清除
示例代碼: [06-延時定時器.html]
var timer = setTimeOut(function(){//1秒后將執行的代碼。console.log("哈哈");
}, 1000);
2.清除延時定時器
語法:clearTimeOut(timerId);
// 參數:定時器id
clearTimeOut(timerId);
示例代碼:
<!-- html 部分 -->
<button id="btn1">開啟</button>
<button id="btn2">關閉</button><!-- js 部分 -->
<script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");// 定義一個全局變量var timeId; // 開啟定時器btn1.onclick = function() {//設置了一個定時器,會返回一個定時器idtimeId = setTimeout(function() {// 兩秒后在頁面顯示 Boom!document.write("<h1> Boom! </h1>");}, 2000);}// 清除定時器btn2.onclick = function() {//清除定時器, 需要定時器idclearTimeout(timeId);}
</script>
效果圖:兩秒后執行代碼,兩秒鐘之內清除定時器,就不會執行
3.2 間歇定時器
間歇定時器讓定時器每隔一段時間就會執行一次,并且會一直執行,到清除定時器為止。
1、設置間歇定時器
語法:var intervalID = setInterval(func, delay);
參數1:重復執行的函數
參數2:每次延遲的毫秒數
返 回:定時器的id,用于清除
示例代碼:
var timer = setInterval(function(){//重復執行的代碼。
}, 1000);
2、清除間歇定時器
語法:clearInterval(intervalID);
參數:定時器id
示例代碼: [07-間歇定時器.html]
<!-- html 部分 -->
<button id="btn1">開啟</button>
<button id="btn2">關閉</button><!-- js 部分 -->
<script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");// 定義一個全局變量 存放定時器var timer;// 開啟定時器btn1.onclick = function() {//設置了一個定時器,會返回一個定時器 idtimer = setInterval(function() {// 每隔1秒 就會創建一個 h2 標簽var tag = document.createElement("h2");tag.innerHTML = "我是間歇定時器";document.body.appendChild(tag);}, 1000);};// 清除定時器btn2.onclick = function() {//清除定時器, 需要定時器idclearInterval(timer);document.body.innerHTML = "<h1>間歇定時器已清除</h1>";};
</script>
效果圖:
2.3 定時器綜合練習
1、獲取短信驗證碼案例 [08-定時器綜合練習-獲取短信驗證碼.html]
<!-- html 部分-->
<input type="button" value="點擊獲取短信驗證碼" id="btn"><!-- js 部分 -->
<script>var btn = document.getElementById('btn');var timer = null;btn.onclick = function() {// 倒計時的秒數var num = 5;// 當按鈕點擊的時候 禁用buttonbtn.disabled = true;timer = setInterval(function() {// 每隔一秒修改num的值num--;// 修改btn的value值 這里不可以用this 因為定時器里的this指的是window對象btn.value = num + "秒后可再次發送";// 當num = 0 秒的時候,清除定時器if (num == 0) {clearInterval(timer);btn.disabled = false;btn.value = "點擊獲取短信驗證碼";}}, 1000);}
</script>
效果圖:
2、倒計時案例 [09-定時器綜合練習-倒計時案例.html]
<!-- 樣式部分 -->
<style>.time {width: 160px;height: 40px;margin: 100px auto;line-height: 40px;font-size: 24px;font-weight: 700;}#h,#m,#s {float: left;display: block;width: 40px;height: 40px;text-align: center;background-color: #F9F9F9;box-shadow: 1px 1px 2px #616161;color: #453246;border-radius: 5px;}.split {width: 20px;float: left;text-align: center;}
</style><!-- html 部分 -->
<div class="time"><span id="h">00</span><span class="split">:</span><span id="m">00</span><span class="split">:</span><span id="s">00</span>
</div><!-- js 部分 -->
<script>var h = document.getElementById('h');var m = document.getElementById('m');var s = document.getElementById('s');setTime();var timer = setInterval(setTime, 1000);function setTime() {// 獲取當前時間var newTime = new Date(); // 此時測試的時間是 2017-12-11 15:24:00(根據本地時間一直在變)// 定義一個未來的時間var futureTime = new Date("2017-12-11 16:30:31");// 獲取時間差 單位是毫秒 首先我們需要轉成秒 而且時間戳獲取的時候 有很多小數 需要取整一下var time = parseInt((futureTime - newTime) / 1000);// time現在已經是秒了 我們需要將它轉換成小時// 1h = 3600svar hours = parseInt(time / 3600);// 將獲取的小時添加到頁面中 // 注意因為時鐘是兩位數,這里的小時可能只是一個個位數,所以需要拼接一個 "0"// 因為 分鐘、秒都需要拼0,所以我們可以封裝一個函數h.innerHTML = addZero(hours);// 獲取分鐘// 先將 time 轉換成分鐘 再去取余60var minutes = parseInt(time / 60) % 60;// 將獲取的分鐘添加到頁面中 m.innerHTML = addZero(minutes);// 獲取秒var seconds = time % 60;s.innerHTML = addZero(seconds);// 還要做個判斷 當time這個時間差小于等于0的時候 清除定時器if (time <= 0) {// 如果不置0的話 還會繼續減time = 0;clearInterval(timer);}}// 拼接 0 函數function addZero(num) {// 如果傳進來的參數小于10 就要給他拼 0return num < 10 ? '0' + num : num;}
</script>
效果圖:
3、電子表案例 [10-定時器綜合練習-電子表.html]
<!-- 樣式部分 -->
<style>#box {width: 300px;height: 50px;background-color: #F9F9F9;box-shadow: 1px 1px 2px #616161;color: #453246;border-radius: 5px;margin: 100px auto;font: bold 24px/50px 楷體;text-align: center;}
</style><!-- html 部分 -->
<div id="box"></div><!-- js 部分 -->
<script>var box = document.getElementById('box');// 封裝一個獲取當前時間的函數function getTime() {// 獲取當前時間var date = new Date();console.log(date);// 獲取當前的年份var year = date.getFullYear();// 獲取當前時間的月份var month = addZero(date.getMonth() + 1);// 獲取當前的天var day = addZero(date.getDate());// 獲取小時var hours = addZero(date.getHours());// 獲取分鐘var minutes = addZero(date.getMinutes());// 獲取秒var seconds = addZero(date.getSeconds());// 將時間格式設置為如下格式var str = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;return str;}// 拼 0 函數function addZero(num) {return num < 10 ? "0" + num : num;}// 定時器會延遲一秒執行,在外面定義一遍 會補償這個一秒box.innerHTML = getTime();setInterval(function() {box.innerHTML = getTime();}, 1000);
</script>
效果圖:
4、機械表案例 [11-定時器綜合練習-機械表.html]
<!-- 樣式部分 -->
<style>.clock {width: 600px;height: 600px;margin: 100px auto;background: url(../image/機械表/clock.jpg) no-repeat;position: relative;}.clock div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../image/機械表/hour.png) no-repeat center center;}#m {background-image: url(../image/機械表/minute.png);}#s {background-image: url(../image/機械表/second.png);}
</style><!-- html 部分 -->
<div class="clock"><div id="h"></div><div id="m"></div><div id="s"></div>
</div><!-- js 部分 -->
<script>var h = document.getElementById("h");var m = document.getElementById("m");var s = document.getElementById("s");function setTime() {// 獲取當前時間var date = new Date();// 設置秒針var seconds = date.getSeconds() + (date.getMilliseconds() / 1000);s.style.transform = "rotate(" + 6 * seconds + "deg)";// 設置分針// 60分鐘一圈360度 每分鐘相當于 6度 這樣只會一分分鐘的走// 我們想要的效果是秒針旋轉地同時 分針也在微弱的旋轉 seconds/60得到一個小數 加上分鐘 再去乘以角度var minutes = date.getMinutes() + seconds / 60;m.style.transform = "rotate(" + 6 * minutes + "deg)";// 設置時針// 12個小時是一圈360度 每個小時相當于 30度var hours = date.getHours() + minutes / 60;h.style.transform = "rotate(" + 30 * hours + "deg)";}// 頁面一加載就執行一次setTime();// 讓window每隔15ms就執行一次 1秒鐘 分成 25份就已經有動畫效果 分成60份,很細膩setInterval(setTime, 15);
</script>
效果圖:
4. Location對象
location
對象也是window
的一個屬性,location
其實對應的就是瀏覽器中的地址欄。
4.1 常用的屬性和方法
location.href
:控制地址欄中的地址
location.href = "http://www.baidu.com"; //讓頁面跳轉到百度首頁
location.reload()
讓頁面重新加載
location.reload(true);//強制刷新,相當于ctrl+F5
location.reload(false);//刷新,相當于F5
location
的其他屬性
console.log(window.location.hash); // 哈希值 其實就是錨點
console.log(window.location.host); // 服務器 服務器名+端口號
console.log(window.location.hostname); // 服務器名
console.log(window.location.pathname); // 路徑名
console.log(window.location.port); // 端口
console.log(window.location.protocol); // 協議
console.log(window.location.search); // 參數
示例代碼:定時跳轉網址 [12-location對象-定時跳轉.html]
<!-- html 部分 -->
<a href="#" id="link">注冊成功,5秒后跳轉</a><!-- js 部分 -->
<script>var num = 5;var link = document.getElementById('link');var timer = setInterval(function() {num--;link.innerHTML = "注冊成功," + num + "秒后跳轉";// 如果倒計時等于0的時候,自動跳轉到網址if (num == 0) {clearInterval(timer);location.href = "https://segmentfault.com/u/marsman_levi";}}, 1000);
</script>
效果圖:
5. Navigator 對象
window.navigator
的一些屬性可以獲取客戶端的一些信息
navigator.userAgent:返回瀏覽器版本 navigator.onLin:返回網絡狀態 true / false
示例代碼:獲取瀏覽器版本 [13-navigator對象.html]
// 打印瀏覽器版本
console.log(navigator.userAgent);// 打印網絡狀態
console.log(navigator.onLine);
效果圖:
6. Screen 對象
window.screen
的一些屬性可以獲取屏幕的寬高
1、獲取屏幕的可占用寬高
返回訪問者屏幕的寬度、高度,以像素計,減去界面特性,比如窗口任務欄。
screen.availWidth:獲取屏幕的可用寬度screen.availHeight:獲取屏幕的可用高度
2、獲取屏幕寬高
screen.width:獲取屏幕的寬度screen.height:獲取屏幕的高度
示例代碼: [14-screen對象.html]
document.write("當前屏幕可占用寬度:" + screen.availWidth + "<br>"); // 1864
document.write("當前屏幕可占用高度:" + screen.availHeight + "<br>"); // 1080
document.write("當前屏幕寬度:" + screen.width + "<br>"); // 1920
document.write("當前屏幕高度:" + screen.height + "<br>"); // 1080
效果圖:
7. History 對象
history
對象表示頁面的歷史
1、后退 history.back()
history.back()
方法加載歷史列表中的前一個URL
。這與在瀏覽器中點擊后退按鈕是相同的:
history.back();
history.go(-1);
2、后退 history.forward()
history forward()
方法加載歷史列表中的下一個URL
。這與在瀏覽器中點擊前進按鈕是相同的:
history.forward();
history.go(1);
8. javascript 彈框
在javascript
中可以創建3
種彈框,分別是:警告框、確認框、提示框。
1、警告框 alert
- 警告框經常用于確保用戶可以得到某些信息。
- 當警告框出現后,用戶需要點擊確定按鈕才能繼續進行操作。
window.alert("呵呵呵");
// window.alert() 方法可以不帶上window對象,直接使用alert()方法。
alert("呵呵呵");
2、確認框 confirm
- 確認框通常用于驗證是否接受用戶操作。
- 當確認卡彈出時,用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。
- 當你點擊 "確認", 確認框返回
true
, 如果點擊 "取消", 確認框返回false
。
var result = confirm();
if (result == true) {alert("你真的是豬!");
} else {alert("你不是豬!");
}
3、提示框 prompt
- 提示框經常用于提示用戶在進入頁面前輸入某個值。
- 當提示框出現后,用戶需要輸入某個值,然后點擊確認或取消按鈕才能繼續操縱。
- 如果用戶點擊確認,那么返回值為輸入的值。如果用戶點擊取消,那么返回值為
null
。
// 參數一:提示內容 參數er:可以省略,輸入框默認顯示內容
var person = prompt("請輸入你的名字", "Levi丶");
if (person != null && person != "") {alert("你好" + person);
}
4、彈框換行
彈窗使用 反斜杠 + "n"(\n)
來設置換行。
alert("大家好\n我是\nLevi丶");
9. javascript Cookie
Cookie
用于存儲web
頁面的用戶信息
1、什么是Cookie?
-
Cookie
是一些數據, 存儲于你電腦上的文本文件中。 - 當
web
服務器向瀏覽器發送web
頁面時,在連接關閉后,服務端不會記錄用戶的信息。 -
Cookie
的作用就是用于解決 "如何記錄客戶端的用戶信息":- 當用戶訪問
web
頁面時,他的名字可以記錄在cookie
中。 - 在用戶下一次訪問該頁面時,可以在
cookie
中讀取用戶訪問記錄。
- 當用戶訪問
Cookie
以名/值對形式存儲,如下所示:
username=Levi
當瀏覽器從服務器上請求web
頁面時,屬于該頁面的cookie
會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。
2、使用 JavaScript 創建Cookie
JavaScript
可以使用document.cookie
屬性來創建 、讀取、及刪除cookie
。
JavaScript中,創建cookie
如下所示:
document.cookie = "username = Levi";
你還可以為cookie
添加一個過期時間(以 UTC
或 GMT
時間)。默認情況下,cookie
在瀏覽器關閉時刪除:
document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800";
你可以使用path
參數告訴瀏覽器cookie
的路徑。默認情況下,cookie
屬于當前頁面
document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";
3、使用 JavaScript 讀取 Cookie
在 JavaScript 中, 可以使用以下代碼來讀取cookie
:
var x = document.cookie;
document.cookie
將以字符串的方式返回所有的cookie
,類型格式cookie1=value;
cookie2=value;
cookie3=value;
4、使用 JavaScript 修改 Cookie
在 JavaScript 中,修改cookie
類似于創建cookie
,如下所示:
document.cookie="username = LXH; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";
舊的cookie
將被覆蓋。
5、使用 JavaScript 刪除 Cookie
刪除cookie
非常簡單。您只需要設置expires
參數為以前的時間即可,如下所示
document.cookie="username = Levi; expires = Thu, 01 Jan 1970 00:00:00 GMT;";
注意,當您刪除時不必指定 cookie 的值。
6、Cookie 字符串
document.cookie
屬性看起來像一個普通的文本字符串,其實它不是。
即使您在document.cookie
中寫入一個完整的cookie
字符串, 當您重新讀取該cookie
信息時,cookie
信息是以名/值對的形式展示的。
如果您設置了新的cookie
,舊的cookie
不會被覆蓋。 新cookie
將添加到document.cookie
中,所以如果您重新讀取document.cookie
。
上一篇:JavaScript 基礎知識 - DOM篇(二)
下一篇:JavaScript 進階知識 - 特效篇(一)