定時器
1兆沙、循環(huán)定時器的設置和取消
（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苫亦、一次性定時器的設置和取消
（1）啟動一次性定時器：setTimeout（）
一次性定時器毛肋，調(diào)用一次就會創(chuàng)建并執(zhí)行一個定時器一次
格式：setTimeout（調(diào)用方法怨咪，毫秒值）；
（2）停止一次性定時器clearTimeout（）
setTimeout方法在創(chuàng)建一個定時器的同時润匙，還會返回一個定時器的ID诗眨，該ID就代表這個定時器
此定時器ID在當前頁面是不能重復的
我們可以通過clearTimeout方法，指定某個一次性定時器停止
格式：clearTimeout（定時器ID）孕讳；
location對象
location 對象包含瀏覽器地址欄信息
常用屬性：href 設置或返回完整的URL
設置href屬性匠楚，瀏覽器就會跳轉到對應的路徑
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é)點關系： 父子節(jié)點關系
文本節(jié)點對象沒有子節(jié)點（葉子節(jié)點）
每個節(jié)點都有一個父節(jié)點冗锁，零到多個子節(jié)點
只有根節(jié)點沒有父節(jié)點（html）
獲取元素對象的四種方式
在JavaScript中，我們可以通過DOM對象的4種方式獲取對應的元素對象：
getElementById();? ? 通過元素ID獲取對應元素對象嗤栓，如果找不到冻河，返回null
getElementsByName();? ? 通過元素的name屬性獲取符合要求的所有元素，如果找不到茉帅，返回空數(shù)組
getElementsByTagName();? ? 通過元素的元素名屬性獲取符合要求的所有元素叨叙，如果找不到，返回空數(shù)組
getElementsByClassName();? ? 通過元素的class屬性獲取符合要求的所有元素堪澎，如果找不到擂错，返回空數(shù)組
注：獲取某個（些）元素節(jié)點對象，必須保證元素節(jié)點對象先被加載到內(nèi)存中
元素對象常見屬性
value
元素對象.value樱蛤，獲取元素對象的value屬性值
元素對象.value=屬性值钮呀，設置元素對象的value屬性值
className
元素對象.className，獲取元素對象的class屬性值
元素對象.className=屬性值昨凡，設置元素對象的class屬性值
checked
元素對象.checked爽醋，獲取元素對象的checked屬性值
元素對象.checked=屬性值，設置元素對象的checked屬性值便脊，修改單選/復選的選中與否
注：HTML中checked="checked"蚂四，JavaScript中返回true
innerHTML
元素對象.innerHTML，獲取元素對象的內(nèi)容體
元素對象.innerHTML=值，設置元素對象的內(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)生指定事件异希，則調(diào)用監(jiān)聽器處理
事件源：小偷（因為偷了東西被抓）
事件：偷東西（由小偷引起的）
監(jiān)聽器：警察（專門處理小偷偷東西的事情的）
注冊/綁定監(jiān)聽器：讓警察時刻盯著小偷（偷了就馬上抓）
3健盒、常見的JS事件
（1）點擊事件（onclick）
點擊事件：由鼠標或熱鍵點擊元素組件時觸發(fā)
（2）焦點事件
獲取焦點事件（onfocus）
焦點：即整個頁面的注意力
默認一個正常頁面最多僅有一個焦點
例如：文本框中閃爍的小豎線
通常焦點也能反映出用戶目前的關注點，或者正在操作的組件
獲取焦點事件：當元素組件獲取焦點時觸發(fā)
失去焦點事件（onblur）
失去焦點事件：元素組件失去焦點時觸發(fā)
（3）域內(nèi)容改變事件（onchange）
域內(nèi)容改變事件：元素組件的值發(fā)生改變時觸發(fā)
（4）加載完畢事件（onload）
加載完畢事件：元素組件加載完畢時觸發(fā)
獲取元素對象時称簿，要保證元素對象先加載扣癣，建議是把獲取元素對象的代碼放在body最后，如果想放在前面憨降，也可以寫在onload中
（5）表單提交事件（onsubmit）
表單提交事件：表單的提交按鈕被點擊時觸發(fā)
注意：該事件需要返回boolean類型的值來執(zhí)行提交/阻止表單數(shù)據(jù)的操作
? ? 事件得到true父虑，提交表單數(shù)據(jù)
? ? 事件得到false，阻止表單數(shù)據(jù)提交
（6）鍵位彈起事件（onkeyup）
鍵位彈起事件：在組件中輸入某些內(nèi)容時授药，鍵盤鍵位彈起時觸發(fā)該事件
（7）常用鼠標事件
鼠標移入事件（onmouseover）
鼠標移入事件：鼠標移入某個元素組件時觸發(fā)
鼠標移出事件（onmouseout）
鼠標移出事件：鼠標移出某個元素組件時觸發(fā)
4士嚎、JS事件的兩種綁定方式
（1）元素事件句柄綁定
將事件以元素屬性的方式寫到標簽內(nèi)部，進而綁定對應函數(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,1,0,0,0);// 結束時間
? // console.log(future-now);? // 打印日志
?? var milli = parseInt((future-now)/1000); // 獲取秒
?? if(milli<=0){
?? window.location.;
?? } // 如果時間到?? 跳轉到百度
?? 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>
