? ? ? ? ? 今天我們學習了定時器，location對象，BOM對象，獲取元素對象的四種屬性，與三俗對象常見屬性，js事件
? ? ? 一、定時器
1、循環(huán)定時器的設(shè)置和取消
（1）啟動循環(huán)定時器：setlnterval()
循環(huán)定時器，調(diào)用一次就會創(chuàng)建并循環(huán)執(zhí)行一個定時器
格式：setInterval（調(diào)用方法，毫秒值）； //毫秒值就是循環(huán)周期
（2）停止循環(huán)定時器clearInterval（）
setInterval方法在創(chuàng)建一個定時器的同時，還會安徽一個定時器的ID，該ID就代表這個定時器
此定時器ID在當前頁面是不能重復的
我們可以通過clearInterval（）方法，指定摸個循環(huán)定時器停止
格式 ： clearInterval（定時器ID）；
2、一次性定時器的設(shè)置和取消
（1）啟動一次性定時器：setTimeout（）
一次性定時器，調(diào)用一次就會創(chuàng)建并執(zhí)行一個定時器一次
格式：setTimeout（調(diào)用方法，毫秒值）；
（2）停止一次性定時器clearTimeout（）
setTimeout方法在創(chuàng)建一個定時器的同時，還會返回一個定時器的ID，該ID就代表這個定時器
此定時器ID在當前頁面是不能重復的
我們可以通過clearTimeout方法，指定某個一次性定時器停止
格式：clearTimeout（定時器ID）；
二、location對象
location 對象包含瀏覽器地址欄信息
常用屬性：href 設(shè)置或返回完整的URL
設(shè)置href屬性，瀏覽器就會跳轉(zhuǎn)到對應(yīng)的路徑
三、DOM對象
1、DOM對象是什么？有什么作用？
DOM（Document Object Model） 文檔對象模型
? 文檔：標記型文檔（HTML等）
DOM是將標記型文檔中所有內(nèi)容（標簽、文本、屬性）都封裝成對象，通過操作對象的屬性或方法，來達到操作或者改變HTML展示效果的目的
2、DOM樹介紹
<html>
<head><title>文檔標題</title></head>
<body><a href="">我的連接</a ><h1>我的標題</h1></body>
</html>
上述HTML文檔會被瀏覽器由上到下依次加載并解析
每個標簽會被加載成DOM樹上的一個元素節(jié)點對象
每個標簽的屬性會被加載成一個屬性節(jié)點對象
每個標簽的內(nèi)容體會被加載成一個文本節(jié)點對象
整個DOM樹，是一個文檔節(jié)點對象，即DOM對象
一個HTML文檔加載到內(nèi)存中就會形成一個DOM對象
3、DOM樹的特點
必定會有一個跟節(jié)點
每個節(jié)點都是節(jié)點對象
常見的節(jié)點關(guān)系： 父子節(jié)點關(guān)系
文本節(jié)點對象沒有子節(jié)點（葉子節(jié)點）
每個節(jié)點都有一個父節(jié)點，零到多個子節(jié)點
只有根節(jié)點沒有父節(jié)點（html）
四、獲取元素對象的四種屬性
在javaScript中，我們可以通過DOM對象的4種方式獲取對應(yīng)的元素對象。
getElementByid(); 通過元素ID獲取對應(yīng)蒜素對象，如果找不到，返回null
getElementsByName(); 通過元素的name屬性獲取符合要求的所有元素，如果找不到，返回空數(shù)組
getElementByTagName(); 通過元素的元素名屬性獲取符合要求的所有元素，如果找不到，返回空數(shù)組
getElementsByClassName(); 通過元素的class屬性獲取符合要求的所有元素，如果占不到，返回空數(shù)組
注：獲取魔偶個（些）元素節(jié)點對象，必須保證元素節(jié)點對象被加載到內(nèi)存中
五、與三俗對象常見屬性
value
元素對象.value，獲取元素對象的value屬性值
className
元素對象.className，獲取元素對象的class屬性
元素對象.className=屬性值，設(shè)置元素對象class屬性值
checked
元素對象.checked，獲取元素的checked屬性值
元素對選哪個.checked=屬性值，設(shè)置元素對象的checked屬性值，修改單選/復選的選中與否
注：HTML中checked="checked"，javascriot中返回trye
innerHtml
元素對象.innerHTML，獲取元素對象的內(nèi)容體
元素對象.innerHTML=值，設(shè)置元素對象的內(nèi)容體
六、js事件
1、js事件是什么？有什么作用？
通常鼠標或熱鍵的動作我們稱之為事件（Event），例如點擊，標案提交，值發(fā)生改變，鼠標移入，移出。。。
通過js事件，我們可以全程頁面的指定特效
2、js事件驅(qū)動機制簡述
頁面上的特效，我們樂意理解在js事件驅(qū)動機制下進行
js事件驅(qū)動機制：
事件源：專門產(chǎn)生事件的組件
事件：由事情源所產(chǎn)生的動作或者事件
監(jiān)聽器：專門處理事件源所產(chǎn)生的事情
注冊/綁定監(jiān)聽器：讓監(jiān)聽器時刻監(jiān)聽事件源是否制定事件產(chǎn)生，如果事件源產(chǎn)生制定事件，則用監(jiān)聽器處理
3、常見的js事件
（1）點擊事件
點擊事件：有鼠標或熱鍵點擊元素組件時觸發(fā)
（2）焦點事件
獲取焦點事件（oncfocus）
焦點：即整個頁面做多僅有一個焦點
例如：文本框中閃爍的小豎線
通常焦點也能反映出用戶目前的關(guān)注點，或者正在操作的組件
獲取焦點事件：當元素組件獲取焦點時觸發(fā)
失去焦點事件（onblur）
失去焦點事件：元素組件失去焦點時觸發(fā)
（3）域內(nèi)蓉改變事件（onchange）
域內(nèi)容改變事件，元素組件的值發(fā)生改變時觸發(fā)
（4）加載完畢事件（obload）
加載完畢事件：元素組成加載完畢時觸發(fā)
獲取元素對象時，要保證元素對象先加載，建議是吧元素對象的代碼放在body最后，如果想放在前面，也可以寫在onload中
（5）表單提交事件（onsubmit）
表單提交事件：表單的提交按鈕被點擊時觸發(fā)
注意：改時間需要返回boolean類型的值來執(zhí)行提交/阻止表單數(shù)據(jù)的操作
? 事件得到true 提交表單數(shù)據(jù)
? 事件得到false 阻止表單數(shù)據(jù)提交
（6）鍵位彈起事件，在組件中輸入某些內(nèi)容時，鍵盤鍵位彈起時觸發(fā)該事件
（7）常用鼠標事件
鼠標移入事件（onmouseover）
鼠標移入事件：鼠標移入某個元素組件時觸發(fā)
鼠標移出事件（onmouseout）
鼠標移出事件：鼠標移出某個元素組件時觸發(fā)
4、js事件的兩種綁定方式
（1）元素事件句柄綁定
將事件以元素的方式寫到標簽內(nèi)部，進而綁定對應(yīng)函數(shù)
事件句柄綁定方式
優(yōu)點：1、開發(fā)快捷；2、傳參方便；3、可以綁定多個函數(shù)
缺點：js和HTML代碼高度柔和在一起，不利于多部門的項目開發(fā)維護
（2）DOM綁定方式
使用DOM的屬性方式綁定事件
DOM綁定方式：
優(yōu)點：使用HTML代碼和JS代碼完全分離
缺點：1、不能傳遞參數(shù)（解決：匿名函數(shù)是可以的）；
2、一個事件只能綁定一個函數(shù)，（解決：匿名函數(shù)內(nèi)部可以綁定對個函數(shù)的）
代碼
<!DOCTYPE html>
<html>
<head>
<title>京東倒計時</title>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
timeLeft();
setInterval(timeLeft,1000);
function timeLeft(){
var now = new Date();
var future = new Date(2020,3,4,0,0,0);
console.log(future-now);
var milli = parseInt((future-now)/1000);
if(milli<=0){
window.location.;
}
var day = parseInt(milli/86400);
var hour = parseInt((milli%86400)/3600);
varmintue=parseInt(((milli%86400)%3600)/60);
var second = milli % 60;
oDiv.innerHTML ='距離2020年04月01日00時00分00秒還有' + day + '天'+toDouble(hour)+'時'+toDouble(mintue)+'分'+toDouble(second)+'秒';
}
}
function toDouble(num){
if(num<10){
return '0'+num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
