BOM 瀏覽器對象模型
- BOM（Browser Object Model）是指瀏覽器對象模型哎壳，瀏覽器對象模型提供來獨立于內(nèi)容的菜谣、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)衰伯。BOM 由多個對象組成砍的，其中代表瀏覽器窗口的 Window 對象是 BOM 的頂層對象蹂喻，其他對象都是該對象的子對象
- 我們在瀏覽器中的一些操作都可以使用 BOM 的方式進(jìn)行編程處理，比如：刷新瀏覽器开泽、后退牡拇、前進(jìn)、在瀏覽器中輸入 URL 等穆律。
在全局作用域中定義變量惠呼，盡量不要用 name 和 top
對話框
- alert()
- prompt()
- confirm()
confirm() 這個方法有返回值，根據(jù)按鈕點擊情況峦耘，如果點擊確定 返回 true剔蹋，如果點擊取消 返回 false
以上方法有兼容問題，不要直接用辅髓，最好模擬寫一個
onload 事件
- 我們可以給 window 對象或者 <img> 等元素添加 onload 加載事件泣崩，表示只有綁定事件的元素加載完畢才能觸發(fā)事件，才能執(zhí)行事件函數(shù)
- 其中 window 對象加載完畢洛口；指的是所有 HTML 結(jié)構(gòu)加載完矫付，并且外部引入資源（js、css绍弟、img技即、視頻）也加載完畢著洼。
應(yīng)用
- 利用 window.onload 事件樟遣，可以將 js 代碼提前到 html 結(jié)構(gòu)之前
- 注意：一個頁面只能有一個 window.onload 事件
延時器
- 延時器是 windos 對象的一個方法，類似于定時炸彈
- 語法：window.setTimeout(func,time);
- 第一個參數(shù)：延時執(zhí)行的函數(shù)身笤，可以是匿名函數(shù)定義豹悬，或者是一個函數(shù)名的引用，注意不要加（）液荸。
- 第二個參數(shù)：延時的時間瞻佛，以毫秒計數(shù)障簿，1000 毫秒等一 1 秒。
- 功能：在指定的時間后虐呻，延遲執(zhí)行一個函數(shù)
清除延時器
- window 對象的一個方法
- 語法：window.clearTimeout(timeout);
- 參數(shù)：指定的延時器變量名引用
- 功能：清除指定的延時器
- 注意：清除的延時器需要存儲到一個變量中去团，便于后期清除調(diào)用
函數(shù)節(jié)流操作
- 定義一個開關(guān)，給函數(shù)上一把鎖适刀，true表示鎖住狀態(tài)秤朗，不能執(zhí)行后面的代碼，false 表示打開狀態(tài)笔喉，可以執(zhí)行后面的代碼
<body>
<input type="button" name="" id="btn" value="點">
</body>
<script>
var btn = document.getElementById("btn");
var lock = false;
btn.onclick = function() {
if (lock) {
return
};
}
console.log(Math.random());
lock = true;
setTimeout(function(){
lock = false;
},2000);
</script>
定時器
- 定時器是 window 對象的一個方法取视，相當(dāng)于定時鬧鐘，每隔固定的時間響一次
- 語法：window.setInterval(func,interval);
- 第一個參數(shù)：每次執(zhí)行的函數(shù)常挚，可以是匿名函數(shù)定義作谭，或者是一個函數(shù)名的引用，注意不要加（）
- 第二個參數(shù)：時間間隔奄毡，以毫秒計數(shù)折欠，1000 毫秒等一 1 秒
- 功能：每隔一個指定的時間，周期性的執(zhí)行一個函數(shù)
var i = 1;
window.setInterval(function(){
console.log(i++)
},500)
清除定時器
- window 對象的一個方法
- 語法：window.clearInterval(timer);
- 參數(shù)：指定的定時器變量名引用
- 功能：清除指定的定時器
- 注意：清除的定時器需要存儲到一個變量中吼过，便于后期清除調(diào)用
簡單運動
原理
- 簡單運動：是一種視覺暫留效果怨酝，只要元素變化過程時間夠短，給人眼造成的效果就是一個運動的效果那先，人眼的視覺殘留的時間 0.1 - 0.4 秒之間
- 制作方法：通過定時器农猬，實現(xiàn)每隔一個極短的時間（50 - 100 毫秒左右），執(zhí)行函數(shù)售淡，函數(shù)內(nèi)部讓運動的屬性值發(fā)生變化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="開始" id="start">
<div class="box" id="box"></div>
</body>
<script>
// 簡單運動
// 獲取元素
var start = document.getElementById("start")
var box = document.getElementById("box")
// 點擊開始按鈕斤葱，讓box像右運動
// 全局變量存儲 left 的屬性值，會每次發(fā)生變化
// 信號量揖闸，初始值必須與屬性初始值一致
var nowleft = 0;
// 定時器揍堕，制作運動過程
start.onclick = function () {
setInterval(function(){
// 信號量進(jìn)行自加
nowleft += 10;
// 將最新的 nowleft 的值賦值給元素的 css 屬性
box.style.left = nowleft + "px";
},100);
};
</script>
</html>
提高運動速度的方法
- 1、縮短時間間隔汤纸，增加了每秒移動的次數(shù)
- 2衩茸、加大步長，讓每一次走的步長增加
清除定時器的問題
問題1 將定時器的開始和停止過程書寫在不同的事件函數(shù)內(nèi)部贮泞，容易出現(xiàn)用戶錯誤點擊情況
1 多次點擊開始楞慈，會造成加速
2 多次點擊開始，不能夠再停止問題2
要求元素走到指定位置停止啃擦，例如讓元素停止在 500px 的位置
如果步長設(shè)置的不合理囊蓝，停止的位置可能不是正好在 500 處
解決
設(shè)表先關(guān)
每次開啟新的定時器之前，都清除一次前面的定時器
拉終停表
在定時器內(nèi)部每次都要判斷是否走到了終點令蛉，要不要停止定時器
如果走到或超過了終點聚霜，強行拉到終點，并停止定時器
封裝動畫函數(shù)
- 單一動畫
- 多屬性動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封裝動畫函數(shù)</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<input type="button" value="開始" id="start">
<div class="box" id="box"></div>
</body>
<script>
// 獲取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
// 補充 獲取計算后樣式的方法
console.log(window.getComputedStyle(box).width)
// box 是需要運動的元素
// 多屬性運動
// 共同點：總時間、時間間隔是相同的蝎宇，自定義
// 不同點：起始位置（通過程序方法自動獲取當(dāng)前頁面最種顯示效果）和結(jié)束位置（自定義指定的）
// 函數(shù)參數(shù)
// 參數(shù)1: 元素對象弟劲，它要進(jìn)行運動
// 參數(shù)2: 結(jié)束位置，以對象數(shù)據(jù)方式傳遞
// 參數(shù)3: 總時間
// 調(diào)用函數(shù)
animate(box,{left: 400,width: 300,height: 200,opacity: 1},2000);
// 自定義動畫函數(shù)
function animate(ele,end,time){
// 已知結(jié)束位置姥芥，總時間函卒，時間間隔 50，缺少起始位置
// 起始位置要根據(jù)結(jié)束位置提供的屬性進(jìn)行獲取
// 起始位置的對象撇眯，需要先定義一個空對象
var now = {};
// start.left = 100;
// end 對象遍歷报嵌，獲取屬性名
for(var k in end){
now[k] = parseFloat(window.getComputedStyle(ele)[k]);
}
// console.log(start)
// 自定義時間間隔
var interval = 50;
// 計算總次數(shù)
var maxCount = time / interval;
// 次數(shù)累加器
var count = 0;
// 對象種的每個屬性都有自己的步長，也可以放到一個步長對象種
var step = {};
// 遍歷結(jié)束對象熊榛，計算每個屬性的步長
for(var k in end){
step[k] = (end[k] - now[k]) / maxCount;
}
// console.log(step);
// =============== 準(zhǔn)備工作結(jié)束锚国，開啟定時器 ===============
var timer;
timer = setInterval(function(){
// 讓每個屬性發(fā)生變化，賦值給 now 對象中的每一項
for(var k in end){
now[k] += step[k];
}
// 累計運動次數(shù)
count++
// 判斷定時器是否結(jié)束
if(count >= maxCount){
// 拉鐘停表
for(var k in end){
now[k] = end[k];
}
// nowLeft = endLeft;
// nowWidth = endWidth;
clearInterval(timer);
}
// 給屬性賦值
// box.style.left = nowLeft + "px";
// box.style.width = nowWidth + "px";
for(var k in now){
// 判斷如果是 不透明度屬性玄坦，不要加 px 單位
if(k === "opacity"){
ele.style[k] = now[k];
}else{
ele.style[k] = now[k] + "px";
}
}
},interval)
}
</script>
</html>
location 對象
- location 對象是 window 對象下的一個屬性血筑，使用的使用可以省略 window 對象
- location 可以獲取或者設(shè)置瀏覽器地址欄的 URL
URL
- 統(tǒng)一資源定位符 （Uniform Resource Locator URL）
- URL的組成：scheme://host:port/path?query#fragment
- 例如：https://www.baidu.com
- scheme：通信協(xié)議，常用的http ftp maito等
- host：主機煎楣，服務(wù)器（計算機）域名系統(tǒng)（DNS）主機名或 IP 地址
- port：端口號豺总，整數(shù)，可選择懂，省略時使用方案的默認(rèn)端口喻喳，如http的默認(rèn)端口為80
- path：路徑，由零或多個'/'符號隔開的字符串困曙，一般用來表示主機上的一個目錄或文件地址
- query：查詢表伦，可選，用于給動態(tài)網(wǎng)頁傳遞參數(shù)慷丽，可有多個參數(shù)蹦哼，用'&'符號隔開，每個參數(shù)的名和值用'='符號隔開要糊。例如：name=zs
- fragment：信息片段纲熏，字符串，錨點
history
- history 對象是 window 對象下的一個屬性锄俄，使用的時候可以省略 window 對象
- history 對象可以與瀏覽器歷史記錄進(jìn)行交互局劲，瀏覽器歷史記錄是對用戶所訪問的頁面按時間進(jìn)行的記錄和保存
- back()
- forward()
- go()
