JS定时器的使用分析[在时钟和菜单中的应用]

本文结合实例分析了JS定时器的使用方法。分享给大家参考，如下：

启动计时器：

设置间隔间隔类型//一旦开始，它就不会停止，重复设置超时延迟类型//仅一次

停止计时器：

clearIntervalclearTimeout

如果只有clearInterval()，关闭计时器将关闭所有计时器。有时我们只需要关闭一个计时器，所以我们需要定义一个变量来存储计时器

var计时器=nullBTN 1 . onclick=function(){ timer=set interval(函数名，1000)；};BTN 2 . onclick=function(){ clearInterval(计时器)；};例1

一个时刻变化的时钟，数字被图片代替

思考：

1.创建一个Date对象并获取系统时间(注意：如果采集时间是一位数字，则需要一个转换为两位数字的函数)

2.将获得的系统时间的每个数字分配给图片地址的数字编号(charAt()方法返回字符串指定位置的字符，因此需要一个for循环以分钟和秒为单位返回六个数字)

3.需要一个计时器来自动更新时间

函数toDouble(num){ //如果(num10){返回' 0' num，则将一个数字转换为两个数字；} else { return ' ' num} } window . onload=function(){ var oimg=document . getelementsbytagname(' img ')；风险值I；函数updatetime(){ var雪夜=new Date()；var str=toDouble(雪夜. getHours()) toDouble(雪夜. getMinutes()) toDouble(雪夜. getseconds())；for(I=0；ioim g . length；i ){ oimg[i]。src='images/' str.charAt(i)"。png '；} } setInterval(updatetime，1000)；//方法应该放在计时器中，而不是直接执行函数update time()；//如果不执行以下功能，会出现刷新页面的第一秒，时间为00: 00: 00}例2

次级菜单

一级菜单和二级菜单之间有间隙。如果移入一级菜单时只在二级显示，移出时隐藏，则移入间隙时仍不会显示(或者来不及进入二级菜单，二级菜单就没了)，所以需要计时器。离开一级菜单时，二级菜单不会立即消失，而是慢慢隐藏。然后进入二级菜单时，清除这个定时器，他就不会消失。

window . onload=function(){ var box 1=document . getelementbyid(' box 1 ')；var box 2=document . getelementbyid(' box 2 ')；var计时器=nullbox 1 . onmouseover=function(){ box 2 . style . display=' block '；clearTimeout(计时器)；//在不清除定时器的情况下，当你离开副菜单进入主菜单时，副菜单将被隐藏。box 1 . onmouseout=function(){ timer=setTimeout(function(){ box 2 . style . display=' none '；},300);};box 2 . onmouseover=function(){ cleartime out(计时器)；};Box2.onmouseout=function(){ //如果离开二级菜单，让它瞬间消失。当您移动到IE7下的主菜单时，辅助菜单将闪烁timer=settimeout(function(){ box 2 . style . display=' none '；},300);};};简化代码

window . onload=function(){ var box 1=document . getelementbyid(' box 1 ')；var box 2=document . getelementbyid(' box 2 ')；var计时器=nullbox 1 . onmouseover=box 2 . onmouseover=function show(){ box 2 . style . display=' block '；clearTimeout(计时器)；};box 1 . onmouseout=box 2 . onmouseout=function hide(){ timer=setTimeout(function(){ box 2 . style . display=' none '；},300);};};更多对JavaScript相关内容感兴趣的读者可以查看本网站的主题：《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。