版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
JavaScript基礎(chǔ)知識到高級應(yīng)用
Scsnbxjyjhf
JavaScript的資料很多，但從未從頭到尾學(xué)完過。偶遇blue老師的被榮為“最經(jīng)典的
JavaScrip視頻教程”后，愛不釋眼，筆記過程中奇想何不筆錄下來，故有此教程。教程中夾
有個人的理解，由于水平有限，請以blue老師的講解為準。
第五課定時器
一、定時器的作用
1、兩種定時器
定時器有兩種，我們先看第一，種setlnterval()：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔
<script>
functionshow()
(
alert('a');
}
setlnterval(show,1000);
</script>
</head>
<body>
</body>
</html>
setlnterval()有兩個參數(shù)，第一個參數(shù)是一個函數(shù)名，第二個參數(shù)是一個數(shù)字，其單位默
認是毫秒,setlnterval(show,1000)則表示按照指定的周期1000毫秒來調(diào)用指定的函數(shù)show,
而且這個方法會不停地調(diào)用函數(shù)，直到clearlnterval()被調(diào)用或窗口被關(guān)閉。
這樣以來，上例運行時會每隔1秒顯示一個提示窗(因提示窗的阻斷，不是自動地不
斷顯示提示窗，而是你單擊確定按鈕后的1秒內(nèi)顯示下一個提示窗)。
setlnterval。這是第一種定時，稱為間隔型。
第二種是延時型：setTimeout(),它仍是那兩個參數(shù)，運行情況是等待第二個參數(shù)所指
定的時間過去后才去執(zhí)行第一個參數(shù)所指定的函數(shù)，不過只執(zhí)行一次便結(jié)束。
setlnterval。與setTimeout()就是這兩種定時器，一個是無限循環(huán)的，一個是只執(zhí)行,一次，
這是它們的最大區(qū)別。
特別是無限循環(huán)的定時器，如果我們某個時候不需要了，該怎么關(guān)閉呢？
2、定時器的開啟與關(guān)閉
與setlnterval()、setTimeout。兩個定時器的開啟相對應(yīng)的關(guān)閉是clearlnterval()
clearTimeout()o
實際上,setlnterval。開啟的同時，會返回一個ID值,這個ID值可用作clearlnterval()
方法的參數(shù)。setTimeout。也是如此。
下面我們來看看怎樣利用這個ID值來關(guān)閉指定的定時器。
<!DOCTYPEHTML>
<html>
<head>
<metacharset=Hutf-8">
無標題文檔
<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>
程序運行后，當我們單擊“開啟”按鈕后，該按鈕的。nclick事件被激活，執(zhí)行其中的
事件代碼，這次我們就不像前例那樣只是開啟了，而是在開啟的同時把它返回的ID值存放
在變量timer中。定時器激活后，會每隔1秒彈出一個窗口，且會無限循環(huán)下去。
當我們單擊“關(guān)閉”后，該按鈕的onclick事件被激活，執(zhí)行其中的事件代碼，
clearlnterval(timer);這句就會把由參數(shù)timer指定的定時器清除掉，也就是關(guān)閉。
二、Date對象及其方法
Date對象用于處理日期和時間。
創(chuàng)建Date對象的語法：
varmyDate=newDate()
Date對象會自動把當前日期和時間保存為其初始值。
new關(guān)鍵字我們在學(xué)習(xí)數(shù)組時曾接觸過，它是創(chuàng)建對象的關(guān)鍵字，待以后我們學(xué)習(xí)到面
向?qū)ο髸r會詳細講解，此處大家只需知道現(xiàn)在是用它來創(chuàng)建了一個Date對象即可。
Date對象有許多的方法，在這節(jié)里我們主要使用它的：
getHours()：返回Date對象的小時(0~23)。
getMinutes()返回Date對象的分鐘(0~59)。
getSeconds()返回Date對象的秒數(shù)(0~59)。
getFullYear()從Date對象以四位數(shù)字返回年份。
getMonth()從Date對象返回月份(0~11)。
getDate()從Date對象返回一個月中的某一天(1~31)
getDay()從Date對象返回一周中的某一天(0~6)。
三、數(shù)碼時鐘
我們先看其效果圖:
超酷時鐘
2016年03月11日
16：24：04星期五
超酷時鐘
2016年03月11日
16：24：18星期五
運行時會取出當前日期、星期、時間顯示出來，且時鐘是活的，其時、分、秒數(shù)會隨著
時間的流逝而變化，且界面炫麗。界面酷逼，實際上是圖片的功勞，比如日期、日期的數(shù)字
就是由象下列那些圖片拼起來的
1png2.png3.pn<
4PR5.png6.png7.png
我們先新建一個文件夾img,把所要用到的圖片放入其中，以備程序使用：
img\
?O.png
6l.png
Q2.png
3?png
償4.png
05.png
66.png
Q7.png
④8.png
9.png
時間是由時、分、秒三部分組成，如12:12:12,而在這個例子里，我們是用對應(yīng)的數(shù)字
圖片來展示時間的，所以要使用六張圖片，先設(shè)計出頁面:
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔</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">
無標題文檔</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)的時間換成當前時間。
首先拿到那六個圖片元素:varalmg=document.getElementsByTagName('img');
然后把這六個元素的圖片換成對應(yīng)的時間數(shù)字圖片。這是程序的關(guān)鍵6
假設(shè)當前時間是13:23:21,那么頁面中的第一個img元素，其src屬性就應(yīng)該修改為
img/l.png,第二個修改為img/3.png,第三個修改為img/2.png,依次類推。
img元素已經(jīng)在almg這個數(shù)組里了，那么我們使用for循環(huán)把它們?nèi)〕鰜矸謩e進行設(shè)置
即可完成了:
for(vari=O;i<almg.length;i++){
almg[i].srcHmg/，+圖片號Ypng。
)
關(guān)鍵在于這個圖片編號怎么去確定呢？怎樣讓程序知道,i=0時即第一張圖片名是1,i=l
時即第二張圖片名是3,……o而且這個時間數(shù)字在不同的時候，其值又是不同的。
我們做這樣的一個設(shè)想，假設(shè)有一個東西，它與img數(shù)組一樣大，但它里面是按時分秒
的順序存放這些時間數(shù)字，那么我們就可根據(jù)img的循環(huán)變量i去依次取出這些數(shù)字號不就
可以了嗎。
說到這里，我們也許會想到數(shù)組，而實際上字符串也有此功效的，如字符串siabcde"
其s⑼就是a,s⑴就是b,s⑵就是c,……
那么我們就用字符串varstr='132321’來表示當前時間，almg[i].src='img/4圖片號+'.png'
這句就可寫成almg[i].src='img/'+str[i]+1pngm其完整代碼如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔
<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>
運行效果如下圖：
這個當前時間是我們指定的，是死的。下面我們要改進的是讓程序自己去獲得當前時間，
然后把它拼接成字符串，代替我們手寫的那個字符串。
我們new出一個Date來：varoDate二newDate。；根據(jù)前面我們所講的Date的知識,這
個oDate對象會自動把當前日期和時間保存為其初始值,也就是此時的oDate里什么都有了，
既有時間，還有日期。
那么我們使用Date對象的獲取時、分、秒的方法，把時、分、秒獲取出來并用字符串
連接符+拼接成一個字符串不就0K了嗎：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔</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>
然而程序不管是在什么瀏覽器中運行都是一個錯誤：
我們將程序中注釋掉的〃alert(str);這句打開，將發(fā)現(xiàn):
這個字符串是108(你的調(diào)試時間不同這個值將不同)，查看系統(tǒng)時間，將發(fā)現(xiàn)它是把
20:41:47中的時、分、秒以數(shù)字相加起來的20+41+47=108,原來getHours。、getMinutes。、
getSeconds。返回的結(jié)果是數(shù)字型的，所以此處的+便不是字符串的拼接，而是真正的加了。
這非常好辦，varstr="+oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();用一空
字符串去與它們相加，自然就是字符串相加了?
經(jīng)過這一改進，運行起來，哈哈，對頭了。
嘿嘿，咋會出現(xiàn)錯誤呢:
我們不斷刷新，程序就會不斷加載，當秒數(shù)小于10,即不是兩位數(shù)時，就會出現(xiàn)上示
錯誤。如果當前時間是21:01:36時，它的錯誤還很離譜:
還有更離譜的錯誤，如果我們把系統(tǒng)時間修改成09:03:01后及時確定，隨即運行我們
的程序：
原來，當這些時、分、秒不是兩位數(shù)時，轉(zhuǎn)成的字符串后其中的時分秒位的數(shù)就會錯位，
而且因為少了數(shù)值位，沒有圖片對應(yīng)，還會出現(xiàn)缺少圖片時的占位X圖。
這說明，在連接成字符串之前，我們須對時、分、秒做一判斷，如果不是兩位數(shù)字，就
給它補0,因時、分、秒都要這樣做，所以我們把它封裝成一個函數(shù)toDou,如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>無標題文檔</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>
好了，這下一切都正常了，但是，它卻是一個死鐘，它不會走起來，實時顯示時間。
要讓它走起來，就要每秒顯示一次，更新里面的時間數(shù)字，這時定時器就派上用場了。
我們把上面那段創(chuàng)建Date對象、獲取時間數(shù)、連接成字符串、設(shè)置時間圖片的代碼放
在一個函數(shù)里，然后讓定時器每隔1秒調(diào)用一次，這個鐘就活了：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔
<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>
但還有一個不夠完美的現(xiàn)象，就是每次開始運行時，或者刷新時，其最初界面還是頁面
上的00:00:00圖片，要待1秒后才會變成現(xiàn)在的時間:
C二file:/〃E:/教學(xué)智能社Blue(石川R三]
00:00:00
這是因為setlnterval(tick,1000);這個定時器有個特點，它在開啟時不是立即開啟，而是
要等待1秒后才會開啟。根據(jù)這上特點，我們可以在定時器開啟前，手工讓定時器要執(zhí)行的
那個函數(shù)先執(zhí)行一下即可解決這個問題(把上面代碼中的〃tick();注釋符去掉即可)。
終于大功告成!。
不急，還沒完。
還有什么呀？
兼容性啦！
如果我們在IE7下運行，將會出錯的：
其原因是，對于一個字符串如s=，abc-在IE7這些低版本瀏覽器中，不支持像數(shù)組那樣
的方式s[0]、s[l],s[2]來取用其中的單個字符，所以會出錯。其兼容性的做法是使用字符串
的charAt方法，如要取用a,用s.charAt(O)；如果取用c,用s.charAt⑵，所以，我們只需將
程序中的almg[i].src='img，+str」i]+'.png';這句中的str.川改成str.charAt。]即可解決這個問題了。
這個時鐘還缺日期顯示部分，這個就請大家自行完成。在這里我們說說Date獲取年、
月、日、星期的那幾個函數(shù)。
getFullYear()從Date對象以四位數(shù)字返回年份。
從對象返回月份
getMonth()Date(0~11)0
getDatef)從Date對象返回一個月中的某一天(1~31)
getDay()從Date對象返回一周中的某一天(0~6)。
getFulYear()與getDate()這兩個出來的結(jié)果與我們的生活實際是一致的，大家直接使用即
可。
getMonth。返回的月份是0~11,也就說它的月份始終比我們?nèi)祟惖脑路菪∫粋€月，因它
從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界面上，我們的鼠標指向自己的頭像與個性簽名處，在左邊就會出現(xiàn)一個資料信
息框，如上圖所示。鼠標移到這個資料框中時，QQ界面立即折疊回去，只有鼠標處的資料
框還在，如下圖所示：
此時鼠標移開這個資料框時，它不會立即消失，要稍等片刻才會消失。我們稱這種為推
遲隱藏。
下面我們來做一個類似的效果。
首先布局：
<(DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔</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中增加一個為none的顯示樣式：#div2{width:250px;height:18Opx;
background:#CCC;display:none;}
下邊我們用JS來完成第一步：獲取那兩個Div元素，然后給Divl加上鼠標移入移出事
件，移入時顯示div2,移出時隱藏div2：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8H>
無標題文檔
<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的了，當鼠標移入到div2時，div2顯示°“移入div2,div2
顯示"這樣的話不是廢話嗎？要移入到div2,不是先要有div2存在才能移入嗎，既然已經(jīng)
顯示出來了，又何必再讓它顯示呢。況且，在我們這個程序里，因margirvlOpx,div2與divl
相距一旦鼠標移出立即消失，所以無論如何我們都無辦法把鼠標移入
20px,divl,div2div2o
在上邊的程序里，我們是無辦法將鼠標移入div2里去的。如果我們使用推遲隱藏技術(shù)，
當鼠標移出divl隱藏div2時，讓div2的隱藏推遲一下，我們則能把鼠標移入div2了。
延時型setTimeout。定時器就能幫我們完成這樣的事情。setTimeout。有兩個參數(shù)，運行
情況是等待第二個參數(shù)所指定的時間過去后才去執(zhí)行第一個參數(shù)所指定的函數(shù)，如下列形式:
setTimeout(function(){....},1000)
下面我們的做法是，在上例代碼中的divl的鼠標移出事件里開一個定時器，并將隱藏
div2的oDiv2.style.display4none';這句代碼放在這個定時器里的那個匿名函數(shù)中就可達到推
遲隱藏div2的目的了：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔
<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)在鼠標就能移入到div2身上去了。但是，好景不長，過1秒后，div2同樣會消失。
因那個定時器等待1秒后會執(zhí)行那個函數(shù)里的代碼，將div2隱藏掉。
當鼠標移出divl后，div2是該隱藏的，但如果移出的鼠標在div2的身上，此時我們就
不再需要隱藏div2了，那就趕緊告訴定時器，我在div2身上，請不要執(zhí)行你的定時執(zhí)行功
能了，即關(guān)閉那個定時器即可。也就是說，我們在div2的鼠標移入事件里調(diào)用clearTimeoutO
方法關(guān)閉那個定時器，這樣div2就不會被隱藏了。但此時隱藏功能被去掉了，那么當鼠標
移出div2時，div2也不會隱藏，所以我們還需給div2加上鼠標移出事件，在這個事件里來
隱藏div2：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔
<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>
在這里，大家可不要忘記了定時器開啟與關(guān)閉的特點，定時器開啟的同時，會返回一個
ID值，這個ID值可用作定時器關(guān)閉方法的參數(shù)。所以，我們增加了一個timer變量來存放
這個ID值，以便關(guān)閉時使用。
到此，此程序就基本上完成了，剩下的是一些需要完善的小不足。
第一個不足,當鼠標由div2移回到divl時，div2總會閃一下。如果我們鼠標移動慢一
點將會發(fā)現(xiàn)，當鼠標移出div2處于兩者之間時，div2隱藏，而接下來鼠標很快又進入divl,
div2又顯示出來，所以會閃一下。
為讓其不閃，我們還是使用同樣的方法，讓div2推遲隱臧。在上例代碼中的div2的鼠
標移出事件里開一個定時器，并將隱藏div2的oDiv2.style.display='none，;這句代碼放在這個
定時器里的那個匿名函數(shù)中就可達到推遲隱藏div2的目的了：
<?DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
無標題文檔</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>
這雖然不閃了，但又帶來了一個新問題，即使鼠標在divl身上，div2過一會兒總會隱
藏的。也許我們會犯疑惑了,當鼠標移入到divl上時,其oDivl.onmouseover=function()
{oDiv2.style.display='block,;};不是已經(jīng)把div2設(shè)置為顯示了啊，咱還會隱藏呢？
上邊的分析也是正確的，確實divl的鼠標移入事件也被執(zhí)行了的，并設(shè)置了div2的顯
示屬性為顯示。但我們不能忽視div2上的定時器，它是等待1秒后把div2的顯示屬性設(shè)置
為不顯示的，也就是說它是后執(zhí)行的，所以div2總會隱藏。
解決的辦法還是一樣，當鼠標在divl身上時，就關(guān)閉div2上的定時器。如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf"8">
〈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()
(
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>
也許細心的你又會出現(xiàn)一個疑慮，同一個變量timer,一會兒引用的是divl上的定時器，
一會兒引用的是div2上的定時器，會不會出現(xiàn)混亂情況，不該關(guān)閉的被關(guān)閉了，該關(guān)閉的
卻沒有關(guān)閉呢。
既然怕亂，何不使用兩個變量來分別代表這兩個定時器呢：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>無標題文檔
<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>
這下兩個定時器也區(qū)別開來了，似乎邏輯上也很明確了，下面我們來全面分析一下代碼,
看一看是否存在bug。
這個程序的復(fù)雜性主要表現(xiàn)在divl與div2之間的事件以及定時器的開啟與關(guān)閉的交錯
上，我們應(yīng)以事件發(fā)生的幾種可能性為線索來進行分析，才不至于混雜一團。
鼠標移動不外乎三種情況：在divl與div2間來回移動、在divl與空白間移動、在div2
與空白間移動。
(為了敘述的方便，我們把鼠標移入divl記為：Tdivl,移出記為divlf,定時器開啟
記為：true,未開啟或被清除記為：false,div2處于顯示狀態(tài)記為：block,處于隱藏狀態(tài)記
為：none,~>none表示將要變成none或者說1秒后變成none)
第一種鼠標在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
從上表可看出，進入divl時div2便顯示，出divl時開啟定時器1,但進入div2時便關(guān)
閉定時器1,所以div2還是處于顯示狀態(tài)。出div2時開啟定時器2,但進入divl時便關(guān)閉
定時器2,div2還是顯示。所以上列代碼在這種情況下無錯誤。
同時我們可看出，在這種情況下，timerl與timer2不會處于同時開啟狀態(tài)，即當一個
開啟時，另一個是關(guān)閉的，而且一個定時器開啟時;下一步的關(guān)閉操作中所關(guān)閉的定時器就
是那個開啟的定時器。那么我們可以這樣理解，這兩個定時器，在同一時刻只有其中一個是
活動的，所以我們可以用同一個變量來存放當前定時器，而不會出現(xiàn)我們所擔(dān)心的發(fā)生混亂
的情況出現(xiàn)，而且代碼還簡潔了一些。這說明，使用兩個變量來存放這兩個定時器，在這種
情況下是多余的。
第二種鼠標在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)在前三步中，第一步，進入divl,顯示出div2；第二步，出divl,
開定時器1;第三步，再進divl,進入后會顯示div2,但定時器1未關(guān)閉，1秒后還會隱藏
div2,就會出現(xiàn)鼠標在divl上，應(yīng)該顯示的div2卻莫明其妙地隱藏了。為解決這個問題，
我們還須在進入divl的事件中增加關(guān)閉定時器1的動作。那么對經(jīng)這樣改進后的程序的執(zhí)
行狀況再進行分析的情況如下：
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)此改進后，鼠標在divl與空白間移動這種情況下變正常了。同時還可看出定時器
timerl與timer2可以用一個變量來存放它們。
但改了后，對原告已經(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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年美發(fā)店承包合同
- 山林轉(zhuǎn)包合同范本
- 2024年醫(yī)療器械代理銷售協(xié)議書
- 房產(chǎn)項目招商代理協(xié)議
- 消防設(shè)施維保合同
- 個人二手車轉(zhuǎn)讓協(xié)議書2024年
- 大連市貨運代理合同
- 2024年標準版離婚協(xié)議書格式
- 校園綠化合同：校園綠化養(yǎng)護承包協(xié)議
- 典型空調(diào)租賃合同
- 軟木底生產(chǎn)工藝流程
- 高邊坡專項施工方案專家已評審
- 氧氣吸入操作評分標準（中心供氧）
- 2024年深圳公司試用期員工勞動合同范文（二篇）
- QBT 102T-2023 甜菜糖廠設(shè)計規(guī)范 （正式版）
- 氣體分析實驗室操作規(guī)程
- 2024年中考道德與法治三輪復(fù)習(xí)：綜合探究題 練習(xí)題（含答案）
- 高等學(xué)校教師崗前培訓(xùn)考試暨教師資格筆試題庫及答案（易錯題）
- 2024年山東濟南新舊動能轉(zhuǎn)換起步區(qū)專職網(wǎng)格員招聘筆試沖刺題（帶答案解析）
- 部編人教版小學(xué)六年級語文上冊《習(xí)作：筆尖流出的故事》
- 智能手機維修技術(shù)第二版全套教學(xué)課件
評論
0/150
提交評論