版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
JavaScript基礎(chǔ)知識到高級應(yīng)用
Scsnbxjyjhf
JavaScript的資料很多，但從未從頭到尾學(xué)完過。偶遇blue老師的被榮為“最經(jīng)典的
JavaScrip視頻教程”后，愛不釋眼，筆記過程中奇想何不筆錄下來，故有此教程。教程中夾
有個(gè)人的理解，由于水平有限，請以blue老師的講解為準(zhǔn)。
第五課定時(shí)器
一、定時(shí)器的作用
1、兩種定時(shí)器
定時(shí)器有兩種，我們先看第一，種setlnterval()：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔
<script>
functionshow()
(
alert('a');
}
setlnterval(show,1000);
</script>
</head>
<body>
</body>
</html>
setlnterval()有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)函數(shù)名，第二個(gè)參數(shù)是一個(gè)數(shù)字，其單位默
認(rèn)是毫秒,setlnterval(show,1000)則表示按照指定的周期1000毫秒來調(diào)用指定的函數(shù)show,
而且這個(gè)方法會不停地調(diào)用函數(shù)，直到clearlnterval()被調(diào)用或窗口被關(guān)閉。
這樣以來，上例運(yùn)行時(shí)會每隔1秒顯示一個(gè)提示窗(因提示窗的阻斷，不是自動地不
斷顯示提示窗，而是你單擊確定按鈕后的1秒內(nèi)顯示下一個(gè)提示窗)。
setlnterval。這是第一種定時(shí)，稱為間隔型。
第二種是延時(shí)型：setTimeout(),它仍是那兩個(gè)參數(shù)，運(yùn)行情況是等待第二個(gè)參數(shù)所指
定的時(shí)間過去后才去執(zhí)行第一個(gè)參數(shù)所指定的函數(shù)，不過只執(zhí)行一次便結(jié)束。
setlnterval。與setTimeout()就是這兩種定時(shí)器，一個(gè)是無限循環(huán)的，一個(gè)是只執(zhí)行,一次，
這是它們的最大區(qū)別。
特別是無限循環(huán)的定時(shí)器，如果我們某個(gè)時(shí)候不需要了，該怎么關(guān)閉呢？
2、定時(shí)器的開啟與關(guān)閉
與setlnterval()、setTimeout。兩個(gè)定時(shí)器的開啟相對應(yīng)的關(guān)閉是clearlnterval()
clearTimeout()o
實(shí)際上,setlnterval。開啟的同時(shí)，會返回一個(gè)ID值,這個(gè)ID值可用作clearlnterval()
方法的參數(shù)。setTimeout。也是如此。
下面我們來看看怎樣利用這個(gè)ID值來關(guān)閉指定的定時(shí)器。
<!DOCTYPEHTML>
<html>
<head>
<metacharset=Hutf-8">
無標(biāo)題文檔
<script>
window.onload=function()
varoBtnl=document.getElementByld('btnl,)；
varoBtn2=document.getElementByld('btn2');
vartimer=null;
oBtnl.onclick=function()
(
timer=setlnterval(function(){
alert('a');
),1000);
)；
oBtn2.onclick=function()
(
clearlnterval(timer);
)；
)；
</script>
</head>
<body>
<inputid="btnlHtype="button”value=“開啟”/〉
<inputid="btn2"type="button"value="^ffl"/>
</body>
</html>
程序運(yùn)行后，當(dāng)我們單擊“開啟”按鈕后，該按鈕的。nclick事件被激活，執(zhí)行其中的
事件代碼，這次我們就不像前例那樣只是開啟了，而是在開啟的同時(shí)把它返回的ID值存放
在變量timer中。定時(shí)器激活后，會每隔1秒彈出一個(gè)窗口，且會無限循環(huán)下去。
當(dāng)我們單擊“關(guān)閉”后，該按鈕的onclick事件被激活，執(zhí)行其中的事件代碼，
clearlnterval(timer);這句就會把由參數(shù)timer指定的定時(shí)器清除掉，也就是關(guān)閉。
二、Date對象及其方法
Date對象用于處理日期和時(shí)間。
創(chuàng)建Date對象的語法：
varmyDate=newDate()
Date對象會自動把當(dāng)前日期和時(shí)間保存為其初始值。
new關(guān)鍵字我們在學(xué)習(xí)數(shù)組時(shí)曾接觸過，它是創(chuàng)建對象的關(guān)鍵字，待以后我們學(xué)習(xí)到面
向?qū)ο髸r(shí)會詳細(xì)講解，此處大家只需知道現(xiàn)在是用它來創(chuàng)建了一個(gè)Date對象即可。
Date對象有許多的方法，在這節(jié)里我們主要使用它的：
getHours()：返回Date對象的小時(shí)(0~23)。
getMinutes()返回Date對象的分鐘(0~59)。
getSeconds()返回Date對象的秒數(shù)(0~59)。
getFullYear()從Date對象以四位數(shù)字返回年份。
getMonth()從Date對象返回月份(0~11)。
getDate()從Date對象返回一個(gè)月中的某一天(1~31)
getDay()從Date對象返回一周中的某一天(0~6)。
三、數(shù)碼時(shí)鐘
我們先看其效果圖:
超酷時(shí)鐘
2016年03月11日
16：24：04星期五
超酷時(shí)鐘
2016年03月11日
16：24：18星期五
運(yùn)行時(shí)會取出當(dāng)前日期、星期、時(shí)間顯示出來，且時(shí)鐘是活的，其時(shí)、分、秒數(shù)會隨著
時(shí)間的流逝而變化，且界面炫麗。界面酷逼，實(shí)際上是圖片的功勞，比如日期、日期的數(shù)字
就是由象下列那些圖片拼起來的
1png2.png3.pn<
4PR5.png6.png7.png
我們先新建一個(gè)文件夾img,把所要用到的圖片放入其中，以備程序使用：
img\
?O.png
6l.png
Q2.png
3?png
償4.png
05.png
66.png
Q7.png
④8.png
9.png
時(shí)間是由時(shí)、分、秒三部分組成，如12:12:12,而在這個(gè)例子里，我們是用對應(yīng)的數(shù)字
圖片來展示時(shí)間的，所以要使用六張圖片，先設(shè)計(jì)出頁面:
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔</title>
</head>
<body>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.pngH/>
<imgsrc="img/O.png,'/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
</body>
</html>
為了使效果明顯，我們再給body加上樣式
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔</title>
</head>
<bodystyle=Hbackground:black;color:white;font-size:50px;">
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
</body>
</html>
下面要做的就是用JS來把這些數(shù)字圖片所展現(xiàn)的時(shí)間換成當(dāng)前時(shí)間。
首先拿到那六個(gè)圖片元素:varalmg=document.getElementsByTagName('img');
然后把這六個(gè)元素的圖片換成對應(yīng)的時(shí)間數(shù)字圖片。這是程序的關(guān)鍵6
假設(shè)當(dāng)前時(shí)間是13:23:21,那么頁面中的第一個(gè)img元素，其src屬性就應(yīng)該修改為
img/l.png,第二個(gè)修改為img/3.png,第三個(gè)修改為img/2.png,依次類推。
img元素已經(jīng)在almg這個(gè)數(shù)組里了，那么我們使用for循環(huán)把它們?nèi)〕鰜矸謩e進(jìn)行設(shè)置
即可完成了:
for(vari=O;i<almg.length;i++){
almg[i].srcHmg/，+圖片號Ypng。
)
關(guān)鍵在于這個(gè)圖片編號怎么去確定呢？怎樣讓程序知道,i=0時(shí)即第一張圖片名是1,i=l
時(shí)即第二張圖片名是3,……o而且這個(gè)時(shí)間數(shù)字在不同的時(shí)候，其值又是不同的。
我們做這樣的一個(gè)設(shè)想，假設(shè)有一個(gè)東西，它與img數(shù)組一樣大，但它里面是按時(shí)分秒
的順序存放這些時(shí)間數(shù)字，那么我們就可根據(jù)img的循環(huán)變量i去依次取出這些數(shù)字號不就
可以了嗎。
說到這里，我們也許會想到數(shù)組，而實(shí)際上字符串也有此功效的，如字符串siabcde"
其s⑼就是a,s⑴就是b,s⑵就是c,……
那么我們就用字符串varstr='132321’來表示當(dāng)前時(shí)間，almg[i].src='img/4圖片號+'.png'
這句就可寫成almg[i].src='img/'+str[i]+1pngm其完整代碼如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔
<script>
window.onload=function()
{
varalmg=document.getElementsByTagName(,img');
varstr=U32321';
for(vari=O;i<almg.length;i++)
(
almg[i].seimg/'+str[i]+'.png'；
}
)；
</script>
</head>
<bodystyle="background:black;color:white;font-size:50px;">
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png“/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
</body>
</html>
運(yùn)行效果如下圖：
這個(gè)當(dāng)前時(shí)間是我們指定的，是死的。下面我們要改進(jìn)的是讓程序自己去獲得當(dāng)前時(shí)間，
然后把它拼接成字符串，代替我們手寫的那個(gè)字符串。
我們new出一個(gè)Date來：varoDate二newDate。；根據(jù)前面我們所講的Date的知識,這
個(gè)oDate對象會自動把當(dāng)前日期和時(shí)間保存為其初始值,也就是此時(shí)的oDate里什么都有了，
既有時(shí)間，還有日期。
那么我們使用Date對象的獲取時(shí)、分、秒的方法，把時(shí)、分、秒獲取出來并用字符串
連接符+拼接成一個(gè)字符串不就0K了嗎：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔</title>
<script>
window.onload=function()
(
varalmg=document.getElementsByTagName('img');
varoDate=newDate();
varstr=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();
//alert(str);
for(vari=O;i<almg.length;i++)
(
almg[i].src='img/'+str[i]+'.png'；
)
)；
</script>
</head>
<bodystyle="background:black;color:white;font-size:50px;">
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc=Himg/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
</body>
</html>
然而程序不管是在什么瀏覽器中運(yùn)行都是一個(gè)錯(cuò)誤：
我們將程序中注釋掉的〃alert(str);這句打開，將發(fā)現(xiàn):
這個(gè)字符串是108(你的調(diào)試時(shí)間不同這個(gè)值將不同)，查看系統(tǒng)時(shí)間，將發(fā)現(xiàn)它是把
20:41:47中的時(shí)、分、秒以數(shù)字相加起來的20+41+47=108,原來getHours。、getMinutes。、
getSeconds。返回的結(jié)果是數(shù)字型的，所以此處的+便不是字符串的拼接，而是真正的加了。
這非常好辦，varstr="+oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();用一空
字符串去與它們相加，自然就是字符串相加了?
經(jīng)過這一改進(jìn)，運(yùn)行起來，哈哈，對頭了。
嘿嘿，咋會出現(xiàn)錯(cuò)誤呢:
我們不斷刷新，程序就會不斷加載，當(dāng)秒數(shù)小于10,即不是兩位數(shù)時(shí)，就會出現(xiàn)上示
錯(cuò)誤。如果當(dāng)前時(shí)間是21:01:36時(shí)，它的錯(cuò)誤還很離譜:
還有更離譜的錯(cuò)誤，如果我們把系統(tǒng)時(shí)間修改成09:03:01后及時(shí)確定，隨即運(yùn)行我們
的程序：
原來，當(dāng)這些時(shí)、分、秒不是兩位數(shù)時(shí)，轉(zhuǎn)成的字符串后其中的時(shí)分秒位的數(shù)就會錯(cuò)位，
而且因?yàn)樯倭藬?shù)值位，沒有圖片對應(yīng)，還會出現(xiàn)缺少圖片時(shí)的占位X圖。
這說明，在連接成字符串之前，我們須對時(shí)、分、秒做一判斷，如果不是兩位數(shù)字，就
給它補(bǔ)0,因時(shí)、分、秒都要這樣做，所以我們把它封裝成一個(gè)函數(shù)toDou,如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>無標(biāo)題文檔</title>
<script>
functiontoDou(n)
if(n<10)
(
return'O'+n;
}
else
(
return"+n;
)
)
window.onload=function()
(
varalmg=document.getElementsByTagName('img');
varoDate=newDate();
varstr=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
//alert(str);
for(vari=O;i<almg.length;i++)
(
almg[i].seimg/'+str[i]+'.png';
)
)；
</script>
</head>
<bodystyle="background:black;color:white;font-size:50px;">
<imgsrc="img/O.pngn/>
<imgsrc="img/O.png"/>
<imgsrc=Himg/O.pngn/>
<imgsrc=Mimg/O.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/O.png"/>
</body>
</html>
好了，這下一切都正常了，但是，它卻是一個(gè)死鐘，它不會走起來，實(shí)時(shí)顯示時(shí)間。
要讓它走起來，就要每秒顯示一次，更新里面的時(shí)間數(shù)字，這時(shí)定時(shí)器就派上用場了。
我們把上面那段創(chuàng)建Date對象、獲取時(shí)間數(shù)、連接成字符串、設(shè)置時(shí)間圖片的代碼放
在一個(gè)函數(shù)里，然后讓定時(shí)器每隔1秒調(diào)用一次，這個(gè)鐘就活了：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔
<script>
functiontoDou(n)
(
if(n<10)
(
return*0'+n;
)
else
(
return"+n;
)
)
window.onload=function()
varalmg=document.getElementsByTagName('img');
functiontick(){
varoDate=newDate();
varstr=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
for(vari=O;i<almg.length;i++)
(
almg[i].src='img/'+str.[i]+'.png';
)
)
//tick();
setlnterval(tick,1000);
)；
</script>
</head>
<bodystyle="background:black;color:white;font-size:50px;">
<imgsrc="img/0.png"/>
<imgsrc="img/0.png"/>
<imgsrc="img/O.png"/>
<imgsrc="img/0.png"/>
<imgsrc="img/0.png"/>
<imgsrc="img/O.png"/>
</body>
</html>
但還有一個(gè)不夠完美的現(xiàn)象，就是每次開始運(yùn)行時(shí)，或者刷新時(shí)，其最初界面還是頁面
上的00:00:00圖片，要待1秒后才會變成現(xiàn)在的時(shí)間:
C二file:/〃E:/教學(xué)智能社Blue(石川R三]
00:00:00
這是因?yàn)閟etlnterval(tick,1000);這個(gè)定時(shí)器有個(gè)特點(diǎn)，它在開啟時(shí)不是立即開啟，而是
要等待1秒后才會開啟。根據(jù)這上特點(diǎn)，我們可以在定時(shí)器開啟前，手工讓定時(shí)器要執(zhí)行的
那個(gè)函數(shù)先執(zhí)行一下即可解決這個(gè)問題(把上面代碼中的〃tick();注釋符去掉即可)。
終于大功告成!。
不急，還沒完。
還有什么呀？
兼容性啦！
如果我們在IE7下運(yùn)行，將會出錯(cuò)的：
其原因是，對于一個(gè)字符串如s=，abc-在IE7這些低版本瀏覽器中，不支持像數(shù)組那樣
的方式s[0]、s[l],s[2]來取用其中的單個(gè)字符，所以會出錯(cuò)。其兼容性的做法是使用字符串
的charAt方法，如要取用a,用s.charAt(O)；如果取用c,用s.charAt⑵，所以，我們只需將
程序中的almg[i].src='img，+str」i]+'.png';這句中的str.川改成str.charAt。]即可解決這個(gè)問題了。
這個(gè)時(shí)鐘還缺日期顯示部分，這個(gè)就請大家自行完成。在這里我們說說Date獲取年、
月、日、星期的那幾個(gè)函數(shù)。
getFullYear()從Date對象以四位數(shù)字返回年份。
從對象返回月份
getMonth()Date(0~11)0
getDatef)從Date對象返回一個(gè)月中的某一天(1~31)
getDay()從Date對象返回一周中的某一天(0~6)。
getFulYear()與getDate()這兩個(gè)出來的結(jié)果與我們的生活實(shí)際是一致的，大家直接使用即
可。
getMonth。返回的月份是0~11,也就說它的月份始終比我們?nèi)祟惖脑路菪∫粋€(gè)月，因它
從0開始數(shù)月份的，所以我們要它的月份上加一才是我們的月份，即在程序中要使用
getMonth()+l來表示月份。
getDay()返回的是0~6,其中的0表示的是星期天，因國外的一周開始是星期天，這與
我們中國人一周的開始是星期一的習(xí)慣不同。
四、推遲隱藏
什么是推遲隱藏，請看下例
HFOCSKJOOB
HF
.L?***.
?
黜：聯(lián)至人討誕建
3444天&36天
南部教育人事工作群
陳至5?：好的
一?1應(yīng)
四川民辦教育數(shù)據(jù)平臺昨天
竟林:各位四長.老師：成都有無o
何建吾昨天
發(fā)送了TS口抖就.
臉證消息昨天
乍人生由請加入群國都縣水
極塞學(xué)院VIP專屬③群昨天
張若極等reactnative爆慢什么
南部縣民辦教青3-10
下用::須陶昵期
在QQ界面上，我們的鼠標(biāo)指向自己的頭像與個(gè)性簽名處，在左邊就會出現(xiàn)一個(gè)資料信
息框，如上圖所示。鼠標(biāo)移到這個(gè)資料框中時(shí)，QQ界面立即折疊回去，只有鼠標(biāo)處的資料
框還在，如下圖所示：
此時(shí)鼠標(biāo)移開這個(gè)資料框時(shí)，它不會立即消失，要稍等片刻才會消失。我們稱這種為推
遲隱藏。
下面我們來做一個(gè)類似的效果。
首先布局：
<(DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔</title>
<style>
div{float:left;margin:10px;}
#divl{width:50px;height:50px;background:red;}
#div2{width:250px;height:180px;background:#CCC;}
</style>
</head>
<body>
<divid="divl"x/div>
<divid="div2"x/div>
</body>
顯示，所以還需在#div2中增加一個(gè)為none的顯示樣式：#div2{width:250px;height:18Opx;
background:#CCC;display:none;}
下邊我們用JS來完成第一步：獲取那兩個(gè)Div元素，然后給Divl加上鼠標(biāo)移入移出事
件，移入時(shí)顯示div2,移出時(shí)隱藏div2：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8H>
無標(biāo)題文檔
<style>
div{float:left;margin:10px;}
#divl{width:50px;height:50px;background:red;}
#div2{width:250px;height:180px;background:#CCC;display:none;}
</style>
<script>
window.onload=function()
(
varoDivl=document.getElementByld('divl');
varoDiv2=document.getElementByld('div2');
oDivl.onmouseover=function()
(
oDiv2.style.display='block';
}；
oDivl.onmouseout=function()
(
oDiv2.style.display='none';
)；
)；
</script>
</head>
<body>
<divid="divl"x/div>
<divid="div2"x/div>
</body>
</html>
做好了divl,下步就應(yīng)做div2的了，當(dāng)鼠標(biāo)移入到div2時(shí)，div2顯示°“移入div2,div2
顯示"這樣的話不是廢話嗎？要移入到div2,不是先要有div2存在才能移入嗎，既然已經(jīng)
顯示出來了，又何必再讓它顯示呢。況且，在我們這個(gè)程序里，因margirvlOpx,div2與divl
相距一旦鼠標(biāo)移出立即消失，所以無論如何我們都無辦法把鼠標(biāo)移入
20px,divl,div2div2o
在上邊的程序里，我們是無辦法將鼠標(biāo)移入div2里去的。如果我們使用推遲隱藏技術(shù)，
當(dāng)鼠標(biāo)移出divl隱藏div2時(shí)，讓div2的隱藏推遲一下，我們則能把鼠標(biāo)移入div2了。
延時(shí)型setTimeout。定時(shí)器就能幫我們完成這樣的事情。setTimeout。有兩個(gè)參數(shù)，運(yùn)行
情況是等待第二個(gè)參數(shù)所指定的時(shí)間過去后才去執(zhí)行第一個(gè)參數(shù)所指定的函數(shù)，如下列形式:
setTimeout(function(){....},1000)
下面我們的做法是，在上例代碼中的divl的鼠標(biāo)移出事件里開一個(gè)定時(shí)器，并將隱藏
div2的oDiv2.style.display4none';這句代碼放在這個(gè)定時(shí)器里的那個(gè)匿名函數(shù)中就可達(dá)到推
遲隱藏div2的目的了：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔
<style>
div{floatleft;margin:10px;}
#divl{width:50px;height:50px;background:red;}
#div2{width:250px;height:180px;background:#CCC;display:none;}
</style>
<script>
window.onload=function()
(
varoDivl=document.getElementByld(,divl');
varoDiv2=document.getElementByld('div2');
oDivl.onmouseover=function()
(
oDiv2.style.display='block,;
)；
oDivl.onmouseout=function()
setTimeout(function(){oDiv2.style.display='none';}/1000);
）；
</script>
</head>
<body>
<divid="divl"x/div>
<divid="div2"x/div>
</body>
</html>
現(xiàn)在鼠標(biāo)就能移入到div2身上去了。但是，好景不長，過1秒后，div2同樣會消失。
因那個(gè)定時(shí)器等待1秒后會執(zhí)行那個(gè)函數(shù)里的代碼，將div2隱藏掉。
當(dāng)鼠標(biāo)移出divl后，div2是該隱藏的，但如果移出的鼠標(biāo)在div2的身上，此時(shí)我們就
不再需要隱藏div2了，那就趕緊告訴定時(shí)器，我在div2身上，請不要執(zhí)行你的定時(shí)執(zhí)行功
能了，即關(guān)閉那個(gè)定時(shí)器即可。也就是說，我們在div2的鼠標(biāo)移入事件里調(diào)用clearTimeoutO
方法關(guān)閉那個(gè)定時(shí)器，這樣div2就不會被隱藏了。但此時(shí)隱藏功能被去掉了，那么當(dāng)鼠標(biāo)
移出div2時(shí)，div2也不會隱藏，所以我們還需給div2加上鼠標(biāo)移出事件，在這個(gè)事件里來
隱藏div2：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔
<style>
div{floatdeft;margin:10px;}
#divl{width:50px;height:5Opx;background:red;}
#div2{width:250px;height:180px;background:#CCC;displaymone;}
</style>
<script>
window.onload=function()
(
varoDivl=document.getElementByld('divl,);
varoDiv2=document.getElementByld(,div2');
vartimer=null;
oDivl.onmouseover=function()
(
oDiv2.style.display='block';
)；
oDivl.onmouseout=function()
(
timer=setTimeout(function(){oDiv2.style.display='none';}/500);
)；
oDiv2,onmouseover=function()
(
clearTimeout(timer);
}；
oDiv2.onmouseout=function()
(
oDiv2.style.display='none';
)；
)；
</script>
</head>
<body>
<divid="divl"x/div>
<divid=,'div2,,x/div>
</body>
</html>
在這里，大家可不要忘記了定時(shí)器開啟與關(guān)閉的特點(diǎn)，定時(shí)器開啟的同時(shí)，會返回一個(gè)
ID值，這個(gè)ID值可用作定時(shí)器關(guān)閉方法的參數(shù)。所以，我們增加了一個(gè)timer變量來存放
這個(gè)ID值，以便關(guān)閉時(shí)使用。
到此，此程序就基本上完成了，剩下的是一些需要完善的小不足。
第一個(gè)不足,當(dāng)鼠標(biāo)由div2移回到divl時(shí)，div2總會閃一下。如果我們鼠標(biāo)移動慢一
點(diǎn)將會發(fā)現(xiàn)，當(dāng)鼠標(biāo)移出div2處于兩者之間時(shí)，div2隱藏，而接下來鼠標(biāo)很快又進(jìn)入divl,
div2又顯示出來，所以會閃一下。
為讓其不閃，我們還是使用同樣的方法，讓div2推遲隱臧。在上例代碼中的div2的鼠
標(biāo)移出事件里開一個(gè)定時(shí)器，并將隱藏div2的oDiv2.style.display='none，;這句代碼放在這個(gè)
定時(shí)器里的那個(gè)匿名函數(shù)中就可達(dá)到推遲隱藏div2的目的了：
<?DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標(biāo)題文檔</title>
<style>
div{float:left;margin:10px;}
#divl{width:50px;height:50px;background:red;}
#div2{width:250px;height:180px;background:#CCC;display:none;}
</style>
<script>
window.onload=function()
(
varoDivl=document.getElementByld(,divl');
varoDiv2=document.getElementByld('div2');
vartimer=null;
oDivl.onmouseover=function()
(
oDiv2.style.display='block,;
)；
oDivl.onmouseout=function()
(
timer=setTimeout(function(){oDiv2.style.display='none';}/500);
)；
oDiv2,onmouseover=function()
clearTimeout(timer);
);
oDiv2.onmouseout=function()
(
setTimeout(function(){oDiv2.style.display='none';}/1000);
)；
)；
</script>
</head>
<body>
<divid="divl"x/div>
<divid="div2"x/div>
</body>
</html>
這雖然不閃了，但又帶來了一個(gè)新問題，即使鼠標(biāo)在divl身上，div2過一會兒總會隱
藏的。也許我們會犯疑惑了,當(dāng)鼠標(biāo)移入到divl上時(shí),其oDivl.onmouseover=function()
{oDiv2.style.display='block,;};不是已經(jīng)把div2設(shè)置為顯示了啊，咱還會隱藏呢？
上邊的分析也是正確的，確實(shí)divl的鼠標(biāo)移入事件也被執(zhí)行了的，并設(shè)置了div2的顯
示屬性為顯示。但我們不能忽視div2上的定時(shí)器，它是等待1秒后把div2的顯示屬性設(shè)置
為不顯示的，也就是說它是后執(zhí)行的，所以div2總會隱藏。
解決的辦法還是一樣，當(dāng)鼠標(biāo)在divl身上時(shí)，就關(guān)閉div2上的定時(shí)器。如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf"8">
〈title〉無標(biāo)題文檔
<style>
div{float:left;margin:10px;}
#divl{width:50px;height:50px;background:red;}
#div2{width:250px;height:180px;background:#CCC;display:none;}
</style>
<script>
window.onload=function()
(
varoDivl=document.getElementByld('divl');
varoDiv2=document.getElementByld('div2');
vartimer=null;
oDivl.onmouseover=function()
(
clearTimeout(timer);
oDiv2.style.display='block';
)；
oDivl.onmouseout=function()
(
timer=setTimeout(function(){oDiv2.style.display='none';}/500);
}；
oDiv2,onmouseover=function()
(
clearTimeout(timer);
}；
oDiv2.onmouseout=function()
(
timer=setTimeout(function(){oDiv2.style.display='none';}/1000)；
)；
)；
</script>
</head>
<body>
<divid="divl"x/div>
<divid=Hdiv2"x/div>
</body>
</html>
也許細(xì)心的你又會出現(xiàn)一個(gè)疑慮，同一個(gè)變量timer,一會兒引用的是divl上的定時(shí)器，
一會兒引用的是div2上的定時(shí)器，會不會出現(xiàn)混亂情況，不該關(guān)閉的被關(guān)閉了，該關(guān)閉的
卻沒有關(guān)閉呢。
既然怕亂，何不使用兩個(gè)變量來分別代表這兩個(gè)定時(shí)器呢：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>無標(biāo)題文檔
<style>
div{floatdeft;margin:10px;}
#divl{width:50px;height:50px;background:red;}
#div2{width:250px;height:180px;background:#CCC;display:none;}
</style>
<script>
window.onload=function()
{
varoDivl=document.getElementByld(,divl');
varoDiv2=document.getElementByld('div2,);
vartimerl=null;
vartimer2=null;
oDivl.onmouseover=function()
(
clearTimeout(timer2);
oDiv2.style.display='block,;
)；
oDivl.onmouseout=function()
,
timerl=setTimeout(function(){oDiv2.style.display='none;}/100);
);
oDiv2.onmouseover=function()
(
clearTimeout(timerl);
)；
oDiv2.onmouseout=function()
(
timer2=setTimeout(function(){oDiv2.style.display='none';},1000);
)；
}；
</script>
</head>
<body>
<divid="divl"x/div>
<divid=',div2"x/div>
</body>
</html>
這下兩個(gè)定時(shí)器也區(qū)別開來了，似乎邏輯上也很明確了，下面我們來全面分析一下代碼,
看一看是否存在bug。
這個(gè)程序的復(fù)雜性主要表現(xiàn)在divl與div2之間的事件以及定時(shí)器的開啟與關(guān)閉的交錯(cuò)
上，我們應(yīng)以事件發(fā)生的幾種可能性為線索來進(jìn)行分析，才不至于混雜一團(tuán)。
鼠標(biāo)移動不外乎三種情況：在divl與div2間來回移動、在divl與空白間移動、在div2
與空白間移動。
(為了敘述的方便，我們把鼠標(biāo)移入divl記為：Tdivl,移出記為divlf,定時(shí)器開啟
記為：true,未開啟或被清除記為：false,div2處于顯示狀態(tài)記為：block,處于隱藏狀態(tài)記
為：none,~>none表示將要變成none或者說1秒后變成none)
第一種鼠標(biāo)在divl與div2間來回移動:
timerltimer2div2
區(qū)域事件初值初值初值
falsefalsenone
玲divlclearTimeout(timer2);oDiv2.style.display=,block';falseblock
divl〉timerl=setTimeout(function(){oDiv2.style.display='none';},100)true->none
->div2clearTimeout(timerl)falseblock
div29timer2=setTimeout(function(){oDiv2.style.display='none';}z1000)true->none
TdivlclearTimeout(timer2);oDiv2.style.display=,block';falseblock
從上表可看出，進(jìn)入divl時(shí)div2便顯示，出divl時(shí)開啟定時(shí)器1,但進(jìn)入div2時(shí)便關(guān)
閉定時(shí)器1,所以div2還是處于顯示狀態(tài)。出div2時(shí)開啟定時(shí)器2,但進(jìn)入divl時(shí)便關(guān)閉
定時(shí)器2,div2還是顯示。所以上列代碼在這種情況下無錯(cuò)誤。
同時(shí)我們可看出，在這種情況下，timerl與timer2不會處于同時(shí)開啟狀態(tài)，即當(dāng)一個(gè)
開啟時(shí)，另一個(gè)是關(guān)閉的，而且一個(gè)定時(shí)器開啟時(shí);下一步的關(guān)閉操作中所關(guān)閉的定時(shí)器就
是那個(gè)開啟的定時(shí)器。那么我們可以這樣理解，這兩個(gè)定時(shí)器，在同一時(shí)刻只有其中一個(gè)是
活動的，所以我們可以用同一個(gè)變量來存放當(dāng)前定時(shí)器，而不會出現(xiàn)我們所擔(dān)心的發(fā)生混亂
的情況出現(xiàn)，而且代碼還簡潔了一些。這說明，使用兩個(gè)變量來存放這兩個(gè)定時(shí)器，在這種
情況下是多余的。
第二種鼠標(biāo)在divl與空白間移動:
timerltimer2div2
區(qū)域事件初值初值初值
falsefalsenone
今divlclearTimeout(timer2);oDiv2.style.display='block,;falseblock
玲
divltimerl=setTimeout(function(){oDiv2.style.display='none';}/100)trueTnone
Block
->divlclearTimeout(timer2);oDiv2.style.display='block';false
none
divl今timerl=setTimeout(function(){oDiv2.style.display='none';},100)truenone
這就有問題了，體現(xiàn)在前三步中，第一步，進(jìn)入divl,顯示出div2；第二步，出divl,
開定時(shí)器1;第三步，再進(jìn)divl,進(jìn)入后會顯示div2,但定時(shí)器1未關(guān)閉，1秒后還會隱藏
div2,就會出現(xiàn)鼠標(biāo)在divl上，應(yīng)該顯示的div2卻莫明其妙地隱藏了。為解決這個(gè)問題，
我們還須在進(jìn)入divl的事件中增加關(guān)閉定時(shí)器1的動作。那么對經(jīng)這樣改進(jìn)后的程序的執(zhí)
行狀況再進(jìn)行分析的情況如下：
timerltimer2div2
區(qū)域事件初值初值初值
falsefalsenone
clearTimeout(timerl);clearTimeout(timer2);
玲divlfalsefalseblock
oDiv2.style.display='block,;
divl〉timerl=setTimeout(function(){oDiv2.style.display='none';},100)true->none
clearTimeout(timerl);clearTimeout(timer2);
fdivlfalsefalseblock
oDiv2.style.display=,block';
divl玲t(yī)imerl=setTimeout(function(){oDiv2.style.display=,none,;},100)truefnone
clearTimeout(timerl);clearTimeout(timer2);
—divlfalsefalseblock
oDiv2.style.display='block,;
經(jīng)此改進(jìn)后，鼠標(biāo)在divl與空白間移動這種情況下變正常了。同時(shí)還可看出定時(shí)器
timerl與timer2可以用一個(gè)變量來存放它們。
但改了后，對原告已經(jīng)正常的第一種情況又如何呢，還須針對此情況再分析:
timerltimer2div2
區(qū)域事件初值初值初值
falsefalsenone
clearTimeout(timerl);clearTimeout(timer2);
玲divlfalsefalseblock
oDiv2.style.display='block';
,玲
divl->timerl=setTimeout(function(){oDiv2.style.display='none;}/100)truenone
今div2clearTimeout(timerl)falseblock
玲
div2->timer2=setTimeout(function(){oDiv2.style.display='none';}z1000)
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年版礦產(chǎn)資源探礦權(quán)出讓合同范本（含礦產(chǎn)資源勘查風(fēng)險(xiǎn)分擔(dān)）3篇
- 2025年度內(nèi)蒙古草原生態(tài)旅游承包經(jīng)營合同3篇
- 2025年度音樂教育項(xiàng)目藝人授課合同3篇
- 二零二五年度文化旅游綜合體租賃合同書3篇
- 年度單抗導(dǎo)向藥物戰(zhàn)略市場規(guī)劃報(bào)告
- 二零二五年度東易日盛跑路事件客戶賠償與調(diào)解合同3篇
- 2024瑜伽館瑜伽教練勞動合同范本及教練與學(xué)員溝通規(guī)范3篇
- 二零二五版“520”荔枝電商法治講堂講師聘用合同3篇
- 2024版建筑水電分包合同范本
- 二零二五年度房產(chǎn)評估咨詢合同樣本4篇
- 第14課《葉圣陶先生二三事》導(dǎo)學(xué)案 統(tǒng)編版語文七年級下冊
- 汽車配件購銷合同范文
- 貴州省2024年中考英語真題（含答案）
- 施工項(xiàng)目平移合同范本
- 北師大版八年級上冊數(shù)學(xué)期中綜合測試卷（含答案解析）
- 幼兒園創(chuàng)意美勞培訓(xùn)
- 同濟(jì)大學(xué)第四版線性代數(shù)課后習(xí)題答案
- 醫(yī)療領(lǐng)域人工智能技術(shù)應(yīng)用的倫理與法規(guī)
- 工地春節(jié)停工復(fù)工計(jì)劃安排
- 美容面部皮膚知識課件
- 胰島素注射的護(hù)理
評論
0/150
提交評論