版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
JavaScript基础知识到高级应用
Scsnbxjyjhf
JavaScript的资料很多，但从未从头到尾学完过。偶遇blue老师的被荣为“最经典的
JavaScrip视频教程”后，爱不释眼，笔记过程中奇想何不笔录下来，故有此教程。教程中夹
有个人的理解，由于水平有限，请以blue老师的讲解为准。
第五课定时器
一、定时器的作用
1、两种定时器
定时器有两种，我们先看第一，种setlnterval()：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
无标题文档
<script>
functionshow()
(
alert('a');
}
setlnterval(show,1000);
</script>
</head>
<body>
</body>
</html>
setlnterval()有两个参数，第一个参数是一个函数名，第二个参数是一个数字，其单位默
认是毫秒,setlnterval(show,1000)则表示按照指定的周期1000毫秒来调用指定的函数show,
而且这个方法会不停地调用函数，直到clearlnterval()被调用或窗口被关闭。
这样以来，上例运行时会每隔1秒显示一个提示窗(因提示窗的阻断，不是自动地不
断显示提示窗，而是你单击确定按钮后的1秒内显示下一个提示窗)。
setlnterval。这是第一种定时，称为间隔型。
第二种是延时型：setTimeout(),它仍是那两个参数，运行情况是等待第二个参数所指
定的时间过去后才去执行第一个参数所指定的函数，不过只执行一次便结束。
setlnterval。与setTimeout()就是这两种定时器，一个是无限循环的，一个是只执行,一次，
这是它们的最大区别。
特别是无限循环的定时器，如果我们某个时候不需要了，该怎么关闭呢？
2、定时器的开启与关闭
与setlnterval()、setTimeout。两个定时器的开启相对应的关闭是clearlnterval()
clearTimeout()o
实际上,setlnterval。开启的同时，会返回一个ID值,这个ID值可用作clearlnterval()
方法的参数。setTimeout。也是如此。
下面我们来看看怎样利用这个ID值来关闭指定的定时器。
<!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事件被激活，执行其中的
事件代码，这次我们就不像前例那样只是开启了，而是在开启的同时把它返回的ID值存放
在变量timer中。定时器激活后，会每隔1秒弹出一个窗口，且会无限循环下去。
当我们单击“关闭”后，该按钮的onclick事件被激活，执行其中的事件代码，
clearlnterval(timer);这句就会把由参数timer指定的定时器清除掉，也就是关闭。
二、Date对象及其方法
Date对象用于处理日期和时间。
创建Date对象的语法：
varmyDate=newDate()
Date对象会自动把当前日期和时间保存为其初始值。
new关键字我们在学习数组时曾接触过，它是创建对象的关键字，待以后我们学习到面
向对象时会详细讲解，此处大家只需知道现在是用它来创建了一个Date对象即可。
Date对象有许多的方法，在这节里我们主要使用它的：
getHours()：返回Date对象的小时(0~23)。
getMinutes()返回Date对象的分钟(0~59)。
getSeconds()返回Date对象的秒数(0~59)。
getFullYear()从Date对象以四位数字返回年份。
getMonth()从Date对象返回月份(0~11)。
getDate()从Date对象返回一个月中的某一天(1~31)
getDay()从Date对象返回一周中的某一天(0~6)。
三、数码时钟
我们先看其效果图:
超酷时钟
2016年03月11日
16：24：04星期五
超酷时钟
2016年03月11日
16：24：18星期五
运行时会取出当前日期、星期、时间显示出来，且时钟是活的，其时、分、秒数会随着
时间的流逝而变化，且界面炫丽。界面酷逼，实际上是图片的功劳，比如日期、日期的数字
就是由象下列那些图片拼起来的
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,而在这个例子里，我们是用对应的数字
图片来展示时间的，所以要使用六张图片，先设计出页面:
<!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来把这些数字图片所展现的时间换成当前时间。
首先拿到那六个图片元素:varalmg=document.getElementsByTagName('img');
然后把这六个元素的图片换成对应的时间数字图片。这是程序的关键6
假设当前时间是13:23:21,那么页面中的第一个img元素，其src属性就应该修改为
img/l.png,第二个修改为img/3.png,第三个修改为img/2.png,依次类推。
img元素已经在almg这个数组里了，那么我们使用for循环把它们取出来分别进行设置
即可完成了:
for(vari=O;i<almg.length;i++){
almg[i].srcHmg/，+图片号Ypng。
)
关键在于这个图片编号怎么去确定呢？怎样让程序知道,i=0时即第一张图片名是1,i=l
时即第二张图片名是3,……o而且这个时间数字在不同的时候，其值又是不同的。
我们做这样的一个设想，假设有一个东西，它与img数组一样大，但它里面是按时分秒
的顺序存放这些时间数字，那么我们就可根据img的循环变量i去依次取出这些数字号不就
可以了吗。
说到这里，我们也许会想到数组，而实际上字符串也有此功效的，如字符串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。；根据前面我们所讲的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);这句打开，将发现:
这个字符串是108(你的调试时间不同这个值将不同)，查看系统时间，将发现它是把
20:41:47中的时、分、秒以数字相加起来的20+41+47=108,原来getHours。、getMinutes。、
getSeconds。返回的结果是数字型的，所以此处的+便不是字符串的拼接，而是真正的加了。
这非常好办，varstr="+oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();用一空
字符串去与它们相加，自然就是字符串相加了•
经过这一改进，运行起来，哈哈，对头了。
嘿嘿，咋会出现错误呢:
我们不断刷新，程序就会不断加载，当秒数小于10,即不是两位数时，就会出现上示
错误。如果当前时间是21:01:36时，它的错误还很离谱:
还有更离谱的错误，如果我们把系统时间修改成09:03:01后及时确定，随即运行我们
的程序：
原来，当这些时、分、秒不是两位数时，转成的字符串后其中的时分秒位的数就会错位，
而且因为少了数值位，没有图片对应，还会出现缺少图片时的占位X图。
这说明，在连接成字符串之前，我们须对时、分、秒做一判断，如果不是两位数字，就
给它补0,因时、分、秒都要这样做，所以我们把它封装成一个函数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>
好了，这下一切都正常了，但是，它却是一个死钟，它不会走起来，实时显示时间。
要让它走起来，就要每秒显示一次，更新里面的时间数字，这时定时器就派上用场了。
我们把上面那段创建Date对象、获取时间数、连接成字符串、设置时间图片的代码放
在一个函数里，然后让定时器每隔1秒调用一次，这个钟就活了：
<!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>
但还有一个不够完美的现象，就是每次开始运行时，或者刷新时，其最初界面还是页面
上的00:00:00图片，要待1秒后才会变成现在的时间:
C二file:/〃E:/教学智能社Blue(石川R三]
00:00:00
这是因为setlnterval(tick,1000);这个定时器有个特点，它在开启时不是立即开启，而是
要等待1秒后才会开启。根据这上特点，我们可以在定时器开启前，手工让定时器要执行的
那个函数先执行一下即可解决这个问题(把上面代码中的〃tick();注释符去掉即可)。
终于大功告成!。
不急，还没完。
还有什么呀？
兼容性啦！
如果我们在IE7下运行，将会出错的：
其原因是，对于一个字符串如s=，abc-在IE7这些低版本浏览器中，不支持像数组那样
的方式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获取年、
月、日、星期的那几个函数。
getFullYear()从Date对象以四位数字返回年份。
从对象返回月份
getMonth()Date(0~11)0
getDatef)从Date对象返回一个月中的某一天(1~31)
getDay()从Date对象返回一周中的某一天(0~6)。
getFulYear()与getDate()这两个出来的结果与我们的生活实际是一致的，大家直接使用即
可。
getMonth。返回的月份是0~11,也就说它的月份始终比我们人类的月份小一个月，因它
从0开始数月份的，所以我们要它的月份上加一才是我们的月份，即在程序中要使用
getMonth()+l来表示月份。
getDay()返回的是0~6,其中的0表示的是星期天，因国外的一周开始是星期天，这与
我们中国人一周的开始是星期一的习惯不同。
四、推迟隐藏
什么是推迟隐藏，请看下例
HFOCSKJOOB
HF
.L❷***.
»
黜：联至人讨诞建
3444天&36天
南部教育人事工作群
陈至5«：好的
一♦1应
四川民办教育数据平台昨天
竟林:各位四长.老师：成都有无o
何建吾昨天
发送了TS口抖就.
脸证消息昨天
乍人生由请加入群国都县水
极塞学院VIP专属③群昨天
张若极等reactnative爆慢什么
南部县民办教青3-10
下用::须陶昵期
在QQ界面上，我们的鼠标指向自己的头像与个性签名处，在左边就会出现一个资料信
息框，如上图所示。鼠标移到这个资料框中时，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,下步就应做div2的了，当鼠标移入到div2时，div2显示°“移入div2,div2
显示"这样的话不是废话吗？要移入到div2,不是先要有div2存在才能移入吗，既然已经
显示出来了，又何必再让它显示呢。况且，在我们这个程序里，因margirvlOpx,div2与divl
相距一旦鼠标移出立即消失，所以无论如何我们都无办法把鼠标移入
20px,divl,div2div2o
在上边的程序里，我们是无办法将鼠标移入div2里去的。如果我们使用推迟隐藏技术，
当鼠标移出divl隐藏div2时，让div2的隐藏推迟一下，我们则能把鼠标移入div2了。
延时型setTimeout。定时器就能帮我们完成这样的事情。setTimeout。有两个参数，运行
情况是等待第二个参数所指定的时间过去后才去执行第一个参数所指定的函数，如下列形式:
setTimeout(function(){....},1000)
下面我们的做法是，在上例代码中的divl的鼠标移出事件里开一个定时器，并将隐藏
div2的oDiv2.style.display4none';这句代码放在这个定时器里的那个匿名函数中就可达到推
迟隐藏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>
现在鼠标就能移入到div2身上去了。但是，好景不长，过1秒后，div2同样会消失。
因那个定时器等待1秒后会执行那个函数里的代码，将div2隐藏掉。
当鼠标移出divl后，div2是该隐藏的，但如果移出的鼠标在div2的身上，此时我们就
不再需要隐藏div2了，那就赶紧告诉定时器，我在div2身上，请不要执行你的定时执行功
能了，即关闭那个定时器即可。也就是说，我们在div2的鼠标移入事件里调用clearTimeoutO
方法关闭那个定时器，这样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>
在这里，大家可不要忘记了定时器开启与关闭的特点，定时器开启的同时，会返回一个
ID值，这个ID值可用作定时器关闭方法的参数。所以，我们增加了一个timer变量来存放
这个ID值，以便关闭时使用。
到此，此程序就基本上完成了，剩下的是一些需要完善的小不足。
第一个不足,当鼠标由div2移回到divl时，div2总会闪一下。如果我们鼠标移动慢一
点将会发现，当鼠标移出div2处于两者之间时，div2隐藏，而接下来鼠标很快又进入divl,
div2又显示出来，所以会闪一下。
为让其不闪，我们还是使用同样的方法，让div2推迟隐臧。在上例代码中的div2的鼠
标移出事件里开一个定时器，并将隐藏div2的oDiv2.style.display='none，;这句代码放在这个
定时器里的那个匿名函数中就可达到推迟隐藏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,;};不是已经把div2设置为显示了啊，咱还会隐藏呢？
上边的分析也是正确的，确实divl的鼠标移入事件也被执行了的，并设置了div2的显
示属性为显示。但我们不能忽视div2上的定时器，它是等待1秒后把div2的显示属性设置
为不显示的，也就是说它是后执行的，所以div2总会隐藏。
解决的办法还是一样，当鼠标在divl身上时，就关闭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>
也许细心的你又会出现一个疑虑，同一个变量timer,一会儿引用的是divl上的定时器，
一会儿引用的是div2上的定时器，会不会出现混乱情况，不该关闭的被关闭了，该关闭的
却没有关闭呢。
既然怕乱，何不使用两个变量来分别代表这两个定时器呢：
<!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>
这下两个定时器也区别开来了，似乎逻辑上也很明确了，下面我们来全面分析一下代码,
看一看是否存在bug。
这个程序的复杂性主要表现在divl与div2之间的事件以及定时器的开启与关闭的交错
上，我们应以事件发生的几种可能性为线索来进行分析，才不至于混杂一团。
鼠标移动不外乎三种情况：在divl与div2间来回移动、在divl与空白间移动、在div2
与空白间移动。
(为了叙述的方便，我们把鼠标移入divl记为：Tdivl,移出记为divlf,定时器开启
记为：true,未开启或被清除记为：false,div2处于显示状态记为：block,处于隐藏状态记
为：none,~>none表示将要变成none或者说1秒后变成none)
第一种鼠标在divl与div2间来回移动:
timerltimer2div2
区域事件初值初值初值
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时便关
闭定时器1,所以div2还是处于显示状态。出div2时开启定时器2,但进入divl时便关闭
定时器2,div2还是显示。所以上列代码在这种情况下无错误。
同时我们可看出，在这种情况下，timerl与timer2不会处于同时开启状态，即当一个
开启时，另一个是关闭的，而且一个定时器开启时;下一步的关闭操作中所关闭的定时器就
是那个开启的定时器。那么我们可以这样理解，这两个定时器，在同一时刻只有其中一个是
活动的，所以我们可以用同一个变量来存放当前定时器，而不会出现我们所担心的发生混乱
的情况出现，而且代码还简洁了一些。这说明，使用两个变量来存放这两个定时器，在这种
情况下是多余的。
第二种鼠标在divl与空白间移动:
timerltimer2div2
区域事件初值初值初值
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
这就有问题了，体现在前三步中，第一步，进入divl,显示出div2；第二步，出divl,
开定时器1;第三步，再进divl,进入后会显示div2,但定时器1未关闭，1秒后还会隐藏
div2,就会出现鼠标在divl上，应该显示的div2却莫明其妙地隐藏了。为解决这个问题，
我们还须在进入divl的事件中增加关闭定时器1的动作。那么对经这样改进后的程序的执
行状况再进行分析的情况如下：
timerltimer2div2
区域事件初值初值初值
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玲timerl=setTimeout(function(){oDiv2.style.display=,none,;},100)truefnone
clearTimeout(timerl);clearTimeout(timer2);
—divlfalsefalseblock
oDiv2.style.display='block,;
经此改进后，鼠标在divl与空白间移动这种情况下变正常了。同时还可看出定时器
timerl与timer2可以用一个变量来存放它们。
但改了后，对原告已经正常的第一种情况又如何呢，还须针对此情况再分析:
timerltimer2div2
区域事件初值初值初值
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. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年美发店承包合同
- 山林转包合同范本
- 2024年医疗器械代理销售协议书
- 房产项目招商代理协议
- 消防设施维保合同
- 个人二手车转让协议书2024年
- 大连市货运代理合同
- 2024年标准版离婚协议书格式
- 校园绿化合同：校园绿化养护承包协议
- 典型空调租赁合同
- 软木底生产工艺流程
- 高边坡专项施工方案专家已评审
- 氧气吸入操作评分标准（中心供氧）
- 2024年深圳公司试用期员工劳动合同范文（二篇）
- QBT 102T-2023 甜菜糖厂设计规范 （正式版）
- 气体分析实验室操作规程
- 2024年中考道德与法治三轮复习：综合探究题 练习题（含答案）
- 高等学校教师岗前培训考试暨教师资格笔试题库及答案（易错题）
- 2024年山东济南新旧动能转换起步区专职网格员招聘笔试冲刺题（带答案解析）
- 部编人教版小学六年级语文上册《习作：笔尖流出的故事》
- 智能手机维修技术第二版全套教学课件
评论
0/150
提交评论