一葫松、定時器
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在當(dāng)前頁面是不能重復(fù)的
? ? ? ? ? ?我們可以通過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在當(dāng)前頁面是不能重復(fù)的
我們可以通過clearTimeout方法，指定某個一次性定時器停止
格式：clearTimeout（定時器ID）锡搜；
二橙困、location對象
location 對象包含瀏覽器地址欄信息
常用屬性：href 設(shè)置或返回完整的URL
設(shè)置href屬性，瀏覽器就會跳轉(zhuǎn)到對應(yīng)的路徑
三耕餐、DOM對象
1凡傅、DOM對象是什么？有什么作用肠缔？
? DOM（Document Object Model） 文檔對象模型
? ? 文檔：標(biāo)記型文檔（HTML等）
DOM是將標(biāo)記型文檔中所有內(nèi)容（標(biāo)簽夏跷、文本、屬性）都封裝成對象明未，通過操作對象的屬性或方法槽华，來達(dá)到操作或者改變HTML展示效果的目的
2、DOM樹介紹
<html>
<head><title>文檔標(biāo)題</title></head>
<body>< a href="">我的連接</ a><h1>我的標(biāo)題</h1></body>
</html>
上述HTML文檔會被瀏覽器由上到下依次加載并解析
每個標(biāo)簽會被加載成DOM樹上的一個元素節(jié)點對象
每個標(biāo)簽的屬性會被加載成一個屬性節(jié)點對象
每個標(biāo)簽的內(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屬性值酱虎，修改單選/復(fù)選的選中與否
注：HTML中checked="checked"，javascriot中返回trye?
innerHtml
元素對象.innerHTML擂涛，獲取元素對象的內(nèi)容體
元素對象.innerHTML=值读串，設(shè)置元素對象的內(nèi)容體
六、js事件
1撒妈、js事件是什么恢暖？有什么作用？
通常鼠標(biāo)或熱鍵的動作我們稱之為事件（Event）狰右，例如點擊杰捂，標(biāo)案提交，值發(fā)生改變棋蚌，鼠標(biāo)移入嫁佳，移出。谷暮。蒿往。
通過js事件，我們可以全程頁面的指定特效
2湿弦、js事件驅(qū)動機制簡述
頁面上的特效瓤漏，我們樂意理解在js事件驅(qū)動機制下進(jìn)行
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）點擊事件
點擊事件：有鼠標(biāo)或熱鍵點擊元素組件時觸發(fā)
（2）焦點事件
獲取焦點事件（oncfocus）
焦點：即整個頁面做多僅有一個焦點
例如：文本框中閃爍的小豎線
通常焦點也能反映出用戶目前的關(guān)注點，或者正在操作的組件
獲取焦點事件：當(dāng)元素組件獲取焦點時觸發(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）常用鼠標(biāo)事件
鼠標(biāo)移入事件（onmouseover）
鼠標(biāo)移入事件：鼠標(biāo)移入某個元素組件時觸發(fā)
鼠標(biāo)移出事件（onmouseout）
鼠標(biāo)移出事件：鼠標(biāo)移出某個元素組件時觸發(fā)
4皿哨、js事件的兩種綁定方式
（1）元素事件句柄綁定
將事件以元素的方式寫到標(biāo)簽內(nèi)部，進(jìn)而綁定對應(yīng)函數(shù)
事件句柄綁定方式
優(yōu)點：1纽谒、開發(fā)快捷证膨；2、傳參方便鼓黔；3央勒、可以綁定多個函數(shù)
缺點：js和HTML代碼高度柔和在一起不见，不利于多部門的項目開發(fā)維護(hù)
（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();//調(diào)用? 刷新沒有空白
?? setInterval(timeLeft,1000);
?? function timeLeft(){
?? var now = new Date();// 客戶端時間
?? var future = new Date(2020,3,1,0,0,0);// 結(jié)束時間
? // console.log(future-now);? // 打印日志
?? var milli = parseInt((future-now)/1000); // 獲取秒
?? if(milli<=0){
?? window.location.;
?? } // 如果時間到?? 跳轉(zhuǎn)到百度
?? var day = parseInt(milli/86400);// 取整天數(shù) 60秒*60分*24小時=86400
?? var hour = parseInt((milli%86400)/3600);// 60秒*60分 =3600 取小時
?? var mintue = 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>
