一渺氧、定時(shí)器
1赢底、循環(huán)定時(shí)器的設(shè)置和取消
（1）啟動(dòng)循環(huán)定時(shí)器：setInterval()
循環(huán)定時(shí)器挫望，調(diào)用一次就會(huì)創(chuàng)建并循環(huán)執(zhí)行一個(gè)定時(shí)器
格式：setInterval(調(diào)用方法, 毫秒值);//毫秒值就是循環(huán)周期
（2）停止循環(huán)定時(shí)器clearInterval(定時(shí)器ID)
setInterval方法在創(chuàng)建一個(gè)定時(shí)器的同時(shí)殴蓬，還會(huì)返回一個(gè)定時(shí)器的ID匿级，該ID就代表這個(gè)定時(shí)器
此定時(shí)器ID在當(dāng)前頁(yè)面是不能重復(fù)的
我們可以通過clearInterval方法蟋滴，指定某個(gè)循環(huán)定時(shí)器停止
格式：clearInterval(定時(shí)器ID);
2、一次性定時(shí)器的設(shè)置和取消
（1）啟動(dòng)一次性定時(shí)器：setTimeout()
一次性定時(shí)器痘绎，調(diào)用一次就會(huì)創(chuàng)建并執(zhí)行一個(gè)定時(shí)器一次
格式：setTimeout(調(diào)用方法,毫秒值);
（2）停止一次性定時(shí)器clearTimeout(定時(shí)器ID)
setTimeout方法在創(chuàng)建一個(gè)定時(shí)器的同時(shí)津函，還會(huì)返回一個(gè)定時(shí)器的ID，該ID就代表這個(gè)定時(shí)器
此定時(shí)器ID在當(dāng)前頁(yè)面是不能重復(fù)的
我們可以通過clearTimeout方法孤页，指定某個(gè)一次性定時(shí)器停止
格式：clearTimeout(定時(shí)器ID);
二尔苦、location對(duì)象
location對(duì)象包含瀏覽器地址欄的信息
常用屬性：href? ? 設(shè)置或返回完整的URL
設(shè)置href屬性，瀏覽器就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的路徑
三行施、DOM對(duì)象
1允坚、DOM對(duì)象是什么？有什么作用蛾号？
DOM（Document Object Model）文檔對(duì)象模型
? ? ???文檔：標(biāo)記型文檔（HTML等）
DOM是將標(biāo)記型文檔中所有內(nèi)容（標(biāo)簽屋讶、文本、屬性）都封裝成對(duì)象须教，通過操作對(duì)象的屬性或者方法皿渗，來達(dá)到操作或者改變HTML展示效果的目的
2、DOM樹介紹
<html>
? ? <head>
? ? ? ? <title>文檔標(biāo)題</title>
? ? </head>
? ? <body>
? ? ? ? < a href="">我的鏈接</ a>
? ? ? ? <h1>我的標(biāo)題</h1>
? ? </body>
</html>
上述HTML文檔會(huì)被瀏覽器由上到下依次加載并解析
每個(gè)標(biāo)簽會(huì)被加載成DOM樹上的一個(gè)元素節(jié)點(diǎn)對(duì)象
每個(gè)標(biāo)簽的屬性會(huì)被加載成一個(gè)屬性節(jié)點(diǎn)對(duì)象
每個(gè)標(biāo)簽的內(nèi)容體會(huì)被加載成一個(gè)文本節(jié)點(diǎn)對(duì)象
整個(gè)DOM樹轻腺，是一個(gè)文檔節(jié)點(diǎn)對(duì)象乐疆，即DOM對(duì)象
一個(gè)HTML文檔加載到內(nèi)存中就會(huì)形成一個(gè)DOM對(duì)象
3、DOM樹的特點(diǎn)：
必定會(huì)有一個(gè)根節(jié)點(diǎn)
每個(gè)節(jié)點(diǎn)都是節(jié)點(diǎn)對(duì)象
常見的節(jié)點(diǎn)關(guān)系：父子節(jié)點(diǎn)關(guān)系
文本節(jié)點(diǎn)對(duì)象沒有子節(jié)點(diǎn)（葉子節(jié)點(diǎn)）
每個(gè)節(jié)點(diǎn)都有一個(gè)父節(jié)點(diǎn)贬养，零到多個(gè)子節(jié)點(diǎn)
只有根節(jié)點(diǎn)沒有父節(jié)點(diǎn)
四挤土、獲取元素對(duì)象的四種方式
在JavaScript中，我們可以通過DOM對(duì)象的4種方式獲取對(duì)應(yīng)的元素對(duì)象：
getElementById();? ? 通過元素ID獲取對(duì)應(yīng)元素對(duì)象误算，如果找不到仰美，返回null
getElementsByName();? ? 通過元素的name屬性獲取符合要求的所有元素，如果找不到儿礼，返回空數(shù)組
getElementsByTagName();? ? 通過元素的元素名屬性獲取符合要求的所有元素咖杂，如果找不到，返回空數(shù)組
getElementsByClassName();? ? 通過元素的class屬性獲取符合要求的所有元素蚊夫，如果找不到诉字，返回空數(shù)組
注：獲取某個(gè)（些）元素節(jié)點(diǎn)對(duì)象，必須保證元素節(jié)點(diǎn)對(duì)象先被加載到內(nèi)存中
五知纷、元素對(duì)象常見屬性
value
元素對(duì)象.value壤圃，獲取元素對(duì)象的value屬性值
元素對(duì)象.value=屬性值，設(shè)置元素對(duì)象的value屬性值
className
元素對(duì)象.className琅轧，獲取元素對(duì)象的class屬性值
元素對(duì)象.className=屬性值伍绳，設(shè)置元素對(duì)象的class屬性值
checked
元素對(duì)象.checked，獲取元素對(duì)象的checked屬性值
元素對(duì)象.checked=屬性值乍桂，設(shè)置元素對(duì)象的checked屬性值冲杀，修改單選/復(fù)選的選中與否
注：HTML中checked="checked"效床，JavaScript中返回true
innerHTML
元素對(duì)象.innerHTML，獲取元素對(duì)象的內(nèi)容體
元素對(duì)象.innerHTML=值漠趁，設(shè)置元素對(duì)象的內(nèi)容體
六、JS事件
1忍疾、JS事件是什么闯传？有什么作用？
通常鼠標(biāo)或熱鍵的動(dòng)作我們稱之為事件（Event）卤妒，例如點(diǎn)擊甥绿、表單提交、值發(fā)生改變则披、鼠標(biāo)移入共缕、移出……
通過JS事件，我們可以完成頁(yè)面的指定特效
2士复、JS事件驅(qū)動(dòng)機(jī)制簡(jiǎn)述
頁(yè)面上的特效图谷，我們可以理解在JS事件驅(qū)動(dòng)機(jī)制下進(jìn)行
JS事件驅(qū)動(dòng)機(jī)制：
事件源：專門產(chǎn)生事件的組件
事件：由事件源所產(chǎn)生的動(dòng)作或者事情
監(jiān)聽器：專門處理事件源所產(chǎn)生的事件
注冊(cè)/綁定監(jiān)聽器：讓監(jiān)聽器時(shí)刻監(jiān)聽事件源是否有指定事件產(chǎn)生，如果事件源產(chǎn)生指定事件阱洪，則調(diào)用監(jiān)聽器處理
事件源：小偷（因?yàn)橥盗藮|西被抓）
事件：偷東西（由小偷引起的）
監(jiān)聽器：警察（專門處理小偷偷東西的事情的）
注冊(cè)/綁定監(jiān)聽器：讓警察時(shí)刻盯著小偷（偷了就馬上抓）
3便贵、常見的JS事件
（1）點(diǎn)擊事件（onclick）
點(diǎn)擊事件：由鼠標(biāo)或熱鍵點(diǎn)擊元素組件時(shí)觸發(fā)
（2）焦點(diǎn)事件
獲取焦點(diǎn)事件（onfocus）
焦點(diǎn)：即整個(gè)頁(yè)面的注意力
默認(rèn)一個(gè)正常頁(yè)面最多僅有一個(gè)焦點(diǎn)
例如：文本框中閃爍的小豎線
通常焦點(diǎn)也能反映出用戶目前的關(guān)注點(diǎn)，或者正在操作的組件
獲取焦點(diǎn)事件：當(dāng)元素組件獲取焦點(diǎn)時(shí)觸發(fā)
失去焦點(diǎn)事件（onblur）
失去焦點(diǎn)事件：元素組件失去焦點(diǎn)時(shí)觸發(fā)
（3）域內(nèi)容改變事件（onchange）
域內(nèi)容改變事件：元素組件的值發(fā)生改變時(shí)觸發(fā)
（4）加載完畢事件（onload）
加載完畢事件：元素組件加載完畢時(shí)觸發(fā)
獲取元素對(duì)象時(shí)冗荸，要保證元素對(duì)象先加載承璃，建議是把獲取元素對(duì)象的代碼放在body最后，如果想放在前面蚌本，也可以寫在onload中
（5）表單提交事件（onsubmit）
表單提交事件：表單的提交按鈕被點(diǎn)擊時(shí)觸發(fā)
注意：該事件需要返回boolean類型的值來執(zhí)行提交/阻止表單數(shù)據(jù)的操作
? ? 事件得到true盔粹，提交表單數(shù)據(jù)
? ? 事件得到false，阻止表單數(shù)據(jù)提交
（6）鍵位彈起事件（onkeyup）
鍵位彈起事件：在組件中輸入某些內(nèi)容時(shí)程癌，鍵盤鍵位彈起時(shí)觸發(fā)該事件
（7）常用鼠標(biāo)事件
鼠標(biāo)移入事件（onmouseover）
鼠標(biāo)移入事件：鼠標(biāo)移入某個(gè)元素組件時(shí)觸發(fā)
鼠標(biāo)移出事件（onmouseout）
鼠標(biāo)移出事件：鼠標(biāo)移出某個(gè)元素組件時(shí)觸發(fā)
4舷嗡、JS事件的兩種綁定方式
（1）元素事件句柄綁定
將事件以元素屬性的方式寫到標(biāo)簽內(nèi)部，進(jìn)而綁定對(duì)應(yīng)函數(shù)
事件句柄綁定方式
? ? 優(yōu)點(diǎn)：1嵌莉、開發(fā)快捷咬崔；2、傳參方便烦秩；3垮斯、可以綁定多個(gè)函數(shù)
? ? 缺點(diǎn)：JS和HTML代碼高度揉合在一起，不利于多部門的項(xiàng)目開發(fā)維護(hù)
（2）DOM綁定方式
使用DOM的屬性方式綁定事件
DOM綁定方式
? ? 優(yōu)點(diǎn)：使得HTML代碼和JS代碼完全分離
? ? 缺點(diǎn)：1只祠、不能傳遞參數(shù)兜蠕，解決：匿名函數(shù)是可以的；2抛寝、一個(gè)事件只能綁定一個(gè)函數(shù)熊杨，解決：匿名函數(shù)內(nèi)部是可以綁定多個(gè)函數(shù)的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒計(jì)時(shí)</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
span{
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: black;
color: white;
font-size: 30px;
text-align: center;
line-height: 60px;
}
i{
font-style: normal;
font-size: 20px;
}
</style>
</head>
<body>
<span id="hs">1</span>
<i>:</i>
<span id="ms">59</span>
<i>:</i>
<span id="ss">47</span>
</body>
</html>
<script type="text/javascript">
//倒計(jì)時(shí)
var count = 1;
var Counter;
function countDown(){ //調(diào)用
Counter = setInterval(f,1000);
}
countDown(); //自運(yùn)行
//倒計(jì)時(shí)
function f(){
var hs = Number(document.getElementById("hs").innerHTML);
var ms = Number(document.getElementById("ms").innerHTML);
var ss = Number(document.getElementById("ss").innerHTML);
if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){
var hs = document.getElementById("hs").innerHTML = "00";
var ms = document.getElementById("ms").innerHTML = "00";
var ss = document.getElementById("ss").innerHTML = "00";
clearInterval(Counter);
console.log(count);
return;
}
if(ss>0){
ss--;
document.getElementById("ss").innerHTML = ss;
count++;
}
if(ss==0){
if(ms>0){
ms--;
document.getElementById("ms").innerHTML = ms;
document.getElementById("ss").innerHTML = 59;
}
}
if(ms==0){
if(hs>0){
hs--;
document.getElementById("hs").innerHTML = hs;
document.getElementById("ms").innerHTML = 59;
}
}
}
</script>
