瀏覽器物件模型
- 1.定時器
- 任務描述
- 相關知識
- (1)設定定時器
- （2）取消定時器
- 代碼檔案
- 2.回圈定時器
- 任務描述
- 相關知識
- （1）定時
- （2）取消定時
- 代碼檔案
- 3.location物件
- 任務描述
- 相關知識
- （1）頁面的跳轉
- （2）location物件的其它屬性
- 代碼檔案
- 4.對話框
- 任務描述
- 相關知識
- （1）警告框
- （2）確認框
- （3）輸入框
- 代碼檔案
- 5.視窗
- 任務描述
- 相關知識
- （1）打開瀏覽器的視窗
- （2）關閉視窗
- 代碼檔案
1.定時器
任務描述
1.本關任務：學習設定和取消定時器，
2.具體要求如下：
- 第一步，設定執行一次的定時任務timerTask()，延遲為2000毫秒，任務的唯一標識賦值給變數timeId，
相關知識
-
JavaScript中定時器的作用是
在指定的時間或者時間間隔之后執行函式，可以用來對網頁上的資料做實時的更新，比如網頁上的北京時間的更新：
這個可以通過每隔一秒執行一次時間更新函式來實作， -
定時器的實作有兩種方式，一個是
window.setTimeout()函式，一個是window.setInterval()函式，本關講解第一種，
(1)設定定時器
window.setTimeout(a,b)用來指定函式a在延遲b毫秒時間后執行，即在window.setTimeout(a,b)這句話開始執行的b毫秒之后，再執行a函式，
比如下面的例子中，我們點擊頁面上的文字，經過4秒的延遲后彈出警告框：
<body>
<p onclick="al()">
單擊此處4秒后彈出警告框
</p>
<script>
var id;
function al() {
id = window.setTimeout(showAlert,4000);
}
function showAlert() {
window.alert("警告框");
}
</script>
</body>
點擊文字會觸發函式a1()，在這個函式里面設定了一個定時任務showAlert()，定時的時間為4秒之后，即：點擊文字4秒之后會執行showAlert()函式，
效果如下所示：
【截圖小能手，(●’?’●)】
（2）取消定時器
- 上面代碼里的變數id是用來唯一標識這個定時任務的，它的作用是，作為函式
window.clearTimeout(id)的引數，而這個函式是用來在定時任務發生之前關閉定時任務，這好比，早晨我們在鬧鐘響之前關掉鬧鐘，
對上面的例子稍微改造，在定時任務開啟之前，通過呼叫window.clearTimeout(id)關閉定時任務，代碼如下：
<body>
<p onclick="al()">
單擊此處4秒后彈出警告框
</p>
<p onclick="a2()">
單擊此處取消警告框的彈出
</p>
<script>
var id;
function al() {
id = window.setTimeout(showAlert,4000);
}
function showAlert() {
window.alert("警告框");
}
function a2() {
window.clearTimeout(id);
}
</script>
</body>
效果如下：
先點擊上面一行文字，觸發了函式a1()，預定了一個4秒之后執行的定時任務showAlert()，再點擊下面一行文字，執行了函式a2()，取消了這個定時任務，這樣在4秒之后不會彈出警告框，這是它和上面的例子的區別，
代碼檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p onclick="handleTimer()">set timer then undo</p>
<script>
var timeId;
function timerTask() {
console.log("this is timer task");
}
function handleTimer() {
//請在此處撰寫代碼
/********** Begin **********/
timeid = window.setTimeout(timerTask,2000);
/********** End **********/
}
</script>
</body>
</html>
2.回圈定時器
任務描述
1.本關任務：取消指定的定時任務，
2.具體要求如下，請按步驟操作：
- 取消定時任務timerTask1()，要求使用本關介紹的方法，
相關知識
上一關講的定時器只會執行一次，好比早上的鬧鐘只會響一次，這個在很多情況下顯然是不可接受的，本關講的就是一種回圈定時器，它會在指定的時間間隔點上重復執行函式，
（1）定時
setInterval(a,b)：每隔b毫秒，執行一次a函式，
下面的例子，每隔一秒鐘，更新一下網頁上的時間：
<body>
<p onclick="updateTime()">
開始更新時間
</p>
<p id="timeContainer">
</p>
<script>
var id;
function updateTime() {
id = window.setInterval(showTime,1000);
}
function showTime(){ document.getElementById("timeContainer").innerText = new Date();
}
</script>
</body>
點擊“開始更新時間”，觸發updateTime()函式，該函式開啟一個回圈定時任務showTime()，showTime()的作用是更新網頁上顯示的時間，
效果如下所示：
（2）取消定時
與上一關類似，window.clearInterval(id)也是停止定時任務，其中的id就是上面例子里面的變數id，這個是為了唯一標識某一個定時任務，防止錯誤的取消了別的定時任務，
修改一下上面的代碼，增加停止時間更新的功能：
<body>
<p onclick="updateTime()">
開始更新時間
</p>
<p onclick="stopTime()">
停止更新時間
</p>
<p id="timeContainer">
</p>
<script>
var id;
function updateTime() {
id = window.setInterval(showTime,1000);
}
function showTime() {
document.getElementById("timeContainer").innerText = new Date();
}
function stopTime() {
window.clearInterval(id);
}
</script>
</body>
點擊“停止更新時間”，觸發stopTime()函式，在函式里面會取消定時任務showTime()，
其效果如下：
代碼檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p onclick="task1()">this is task onea</p>
<p onclick="task2()">this is task two</p>
<p onclick="removeTask1()">try to remove task one</p>
<script>
var timeId1;
var timeId2;
function timerTask1() {
console.log("timerTask1!");
}
function timerTask2() {
console.log("timerTask2!");
}
function task1() {
timeId1 = window.setInterval(timerTask1,2000);
}
function task2() {
timeId2 = window.setInterval(timerTask2,1500);
}
function removeTask1() {
//請在此處撰寫代碼
/********** Begin **********/
window.clearInterval(timeId1);
/********** End **********/
}
</script>
</body>
</html>
3.location物件
任務描述
1.本關任務：讀取主機名以及實作頁面跳轉，
2.具體要求如下：
- 第一步，獲取location物件，賦值給變數loc；
- 第二步，利用loc列印出當前頁面地址的主機名；
- 第三步，利用loc實作跳轉到https://www.educoder.net/forums/categories/all?order=newest；
- 字串引數放在英文雙引號內，
相關知識
location物件就是window.location，記載了瀏覽器當前所在的視窗的URL（統一資源定位符）資訊，它常常被用來實作網頁的跳轉，
（1）頁面的跳轉
location.href屬性表示當前視窗所在頁面的地址，比如，如果我們在本網站的首頁（https://www.educoder.net/），列印window.location.href：
<body>
<script>
console.log(window.location.href);
</script>
</body>
列印出來的結果是：
這個結果應當和瀏覽器地址欄上內容一樣，
window.location.href還是可寫的，如果把它設定為一個新的地址，當前視窗將立即打開這個新的地址，這是實作頁面跳轉的一種方式，比如下面的例子：
<body>
<p onclick="toNew()">
點我調到EduCoder首頁
</p>
<script>
function toNew() {
window.location.href = "https://www.educoder.net";
}
</script>
</body>
點擊頁面上的文字，效果如下：
（2）location物件的其它屬性
假設，當前瀏覽器地址欄的內容是：https://www.educoder.net:8080/shixun.html?tab=1，我們用一個表格看一下location物件的所有屬性：
以下用一個例子列印所有這些屬性，假設我們在https://www.educoder.net:8080/shixun.html?tab=1這個頁面：
<body onl oad="printInfo()">
location attribute
<script>
function printInfo() {
var loc = window.location;
console.log("host:"+loc.host);
console.log("hostname:"+loc.hostname);
console.log("pathname:"+loc.pathname);
console.log("port:"+loc.port);
console.log("protocal:"+loc.protocal);
console.log("search:"+loc.search);
}
</script>
</body>
載入頁面后，列印結果如下：
代碼檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p onclick="openNew()">Click me to new page!</p>
<script>
function openNew() {
//請在此處撰寫代碼
/********** Begin **********/
var loc = window.location;
console.log(loc.hostname);
loc.href = "https://www.educoder.net/forums/categories/all?order=newest";
/********** End **********/
}
</script>
</body>
</html>
4.對話框
任務描述
1.本關任務：練習輸入型對話框的使用，
2.具體要求如下：
- 第一步：彈出一個輸入型對話框（輸入框），用戶的輸入結果賦值給變數result，輸入框提示語為your name，輸入框默認值為Xiao Ming；
- 第二步：使用result判斷用戶的輸入是否為null（不是字串null，是表示空的null），如果是，在控制臺列印name cannot be null；
- 字串型別的引數用""包含在內，
相關知識
對話框就是在瀏覽器頁面上再彈出一個小的視窗，用于和用戶直接互動，window物件的alert()、confirm()和prompt()三個方法都是用來顯示對話框的，
（1）警告框
window.alert(msg)彈出一個警告框，表示向用戶發送一條通知，前面的相關知識已經多次講過alert()的用法，
需要注意的是，alert()方法彈出警告框后，其后的代碼會暫停執行，直到警告框被關閉，即：alert()方法是阻塞的，
下面的例子中，關閉警告框后，控制臺才會列印資訊：
<body>
<p onclick="showAlert()">點我彈出警告框</p>
<script>
function showAlert() {
window.alert("先彈出一個警告框");
console.log("然后才能在控制臺列印資訊");
}
</script>
</body>
其效果如下：
（2）確認框
window.confirm(msg)彈出一個確認框，msg是需要用戶確認的資訊，用戶在彈出的框里面選擇確認或者取消后，會回傳true或者false，
<body>
<p onclick="showConfirm()">點我彈出確認框</p>
<script>
function showConfirm() {
var result = window.confirm("確定今天是周五？");
console.log(result);
}
</script>
</body>
效果如下：
（3）輸入框
window.prompt(a,b)彈出一個輸入框，供用戶輸入關鍵資訊，其中a是輸入框的提示語，b是輸入框里面默認的內容，
如果用戶不輸入，直接點擊確認，回傳b，如果點擊取消，回傳null，
下面是一個例子：
<body>
<p onclick="showPrompt()">點我彈出輸入框</p>
<script>
function showPrompt() {
var result = window.prompt("請輸入姓名：", "Jack");
console.log(result);
}
</script>
</body>
效果如下所示：
如動態圖所示，不輸入點確定回傳默認的內容；直接點取消回傳null，【本是個動態圖，我只是截圖了~】
代碼檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p onclick="inputName()">Click to input name!</p>
<script>
function inputName() {
var result;
//請在此處撰寫代碼
/********** Begin **********/
var result = window.prompt("your name：", "Xiao Ming");
if(result==null){
console.log("name cannot be null");
}
/********** End **********/
}
</script>
</body>
</html>
5.視窗
任務描述
1.本關任務：練習視窗的操作，
2.具體要求如下：
- 第一步，打開一個視窗，它的檔案的地址是Demo.html，name屬性是視窗名字window_name，specs和replace不用設定，將打開的視窗賦值給變數myWindow；
- 字串引數放在英文雙引號內，
相關知識
瀏覽器的一個標簽頁叫做一個視窗，window物件可以操作瀏覽器視窗的打開與關閉，
（1）打開瀏覽器的視窗
window.open(url,name,specs,replace)用來打開一個瀏覽器的視窗，它有四個引數：
- url表示視窗里面的檔案的地址；
- name有兩種情況，
- 如果name里面是視窗的名字，瀏覽器會先判斷這個視窗是否已經打開，已經打開則用新的url里面的檔案替換這個視窗里面原來的檔案，反映到瀏覽器上是不會有新的標簽頁打開，但是一個已存在的標簽頁會重繪，沒有打開則打開一個新的視窗，并且載入url里面的檔案，
- 如果name是
_blank、_self里面中的任何一個，它的含義如下：
- specs是用來控制新視窗的尺寸等特征，比如值為
width=200,height=100時，表示新視窗寬度為200px，高度為100px， - replace用來控制新的視窗在瀏覽器的瀏覽歷史里面如何顯示，為
true表示裝載到視窗的url替換掉瀏覽歷史中的當前條目；為false表示裝載到視窗的url創建一個新的條目，
下面的例子展示了這些引數的具體用法：
<body>
<p onclick="openNewWindow()">name是一個視窗的名字，打開一個新的視窗，載入新的檔案</p>
<p onclick="openOldWindow()">name是一個視窗的名字，打開已存在的視窗，替換掉里面的檔案</p>
<p onclick="blankWindow()">name是一個target屬性，值為_blank</p>
<p onclick="selfWindow()">name是一個target屬性，值為_self</p>
<script>
function openNewWindow() {
window.open("Demo1.html", "windowName");
}
function openOldWindow() {
window.open("Demo2.html", "windowName");
}
function blankWindow() {
window.open("Demo1.html", "_blank");
}
function selfWindow() {
window.open("Demo1.html", "_self");
}
</script>
</body>
效果如下所示：
如上所示，
- 第一種情況，name是一個視窗的名字，因為這個視窗還沒有打開，所以會打開一個新的視窗，并載入url檔案，
- 第二種情況，name是一個視窗的名字，因為這個視窗已打開，所以新的檔案會替換掉原來的檔案，
- 第三種情況，name值為_blank，會直接打開一個新的視窗
- 第四種情況，name值為_self，會用url里面的檔案替換掉當前視窗的檔案，不會打開新的視窗，
（2）關閉視窗
上面的window.open()會有一個回傳值result，result.close()用來關閉打開的視窗，比如下面的例子：
<body>
<p onclick="openNewWindow()">打開新視窗</p>
<p onclick="closeNewWindow()">關閉新視窗</p>
<script>
var w;
function openNewWindow() {
w = window.open("Demo1.html", "windowName");
}
function closeNewWindow() {
w.close();
}
</script>
</body>
效果如下：
代碼檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p onclick="openNewWindow()">open new window</p>
<script>
var myWindow;
function openNewWindow() {
//請在此處撰寫代碼
/********** Begin **********/
var myWindow = window.open("Demo.html", "window_name");
/********** End **********/
}
</script>
</body>
</html>
【這周的練習又結束了呢？小白終于要做另一個平臺的題了，累die~，明天還要補課，/(ㄒoㄒ)/，QAQ，這個世界上又多了個傷心人！】
句子君：
“自己”這個東西是看不見的，撞上一些別的什么，反彈回來，才會了解“自己”，所以跟很強的東西、可怕的東西、水準很高的東西相碰撞，然后才知道自己是什么，這才是自我，——山本耀司
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280371.html
標籤：其他
上一篇：Vue介紹以及練手案例——音樂播放器（搜索音樂、聽歌、看評論、看mv等）（持續更新）
下一篇：CSS相應式卡包