JS定时器用法分析【时钟与菜单中的应用】


Posted in Javascript onDecember 21, 2016

本文实例分析了JS定时器用法。分享给大家供大家参考,具体如下:

开启定时器:

setInterval 间隔型    //一旦启动就不会停,重复执行
setTimeout 延迟型   //只执行一次

停止定时器:

clearInterval
clearTimeout

关闭定时器如果只是clearInterval()那会关掉所有的定时器,有时我们只需要关掉一个而已,所以要定义一个变量来存放定时器

var timer=null;
btn1.onclick=function(){
  timer=setInterval(函数名,1000);
};
btn2.onclick=function(){
  clearInterval(timer);
};

例子1

JS定时器用法分析【时钟与菜单中的应用】

时刻变化的时钟,且数字是由图片代替的

思路:

1.创建Date(日期)对象,获取系统时间(注:获取时间如果是一位数,需要一个转换成二位数的函数)

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

3.需要一个定时器让它自动更新时间

function toDouble(num){ //一位数转换成二位数
  if(num<10){
    return '0'+num;
  }else{
    return ''+num;
  }
}
window.onload=function(){
  var oimg=document.getElementsByTagName('img');
  var i;
  function updatetime(){
    var odate=new Date();
    var str=toDouble(odate.getHours())+toDouble(odate.getMinutes())+toDouble(odate.getSeconds());
    for(i=0;i<oimg.length;i++){
      oimg[i].src='images/'+str.charAt(i)+'.png';
    }
  }
  setInterval(updatetime,1000); //定时器里面应该放的是方法,而不是直接执行函数
  updatetime(); //不执行下函数,会出现刚刷新页面第一秒,时间是00时00分00秒
}

例子2

二级菜单

JS定时器用法分析【时钟与菜单中的应用】

一级菜单和二级菜单间有缝隙,如果仅仅是移入一级菜单时二级显示,移除时隐藏,那么移到缝隙间还是会显示不出来(或者说来不及进入二级菜单,二级菜单就没了),所以需要一个定时器,在离开一级菜单时,不让二级马上消失,而是缓慢隐藏,然后在进入二级菜单时,清除这个定时器,他就不会消失了,另外离开二级菜单时,还是要让它消失,不然会永远存在

window.onload=function(){
  var box1=document.getElementById('box1');
  var box2=document.getElementById('box2');
  var timer=null;
  box1.onmouseover=function(){
    box2.style.display="block";
    clearTimeout(timer);  //不清除定时器,离开二级菜单进入一级菜单时,二级菜单也会隐藏
  };
  box1.onmouseout=function(){
    timer=setTimeout(function(){
      box2.style.display="none";
    },300);
  };
  box2.onmouseover=function(){
    clearTimeout(timer);
  };
  box2.onmouseout=function(){  //如果离开二级菜单,让他瞬间消失,IE7下移动到一级菜单时,二级菜单会闪烁
    timer=setTimeout(function(){
      box2.style.display="none";
    },300);
  };
};

简化下代码

window.onload=function(){
  var box1=document.getElementById('box1');
  var box2=document.getElementById('box2');
  var timer=null;
  box1.onmouseover=box2.onmouseover=function show(){
    box2.style.display="block";
    clearTimeout(timer);
  };
  box1.onmouseout=box2.onmouseout=function hide(){
    timer=setTimeout(function(){
      box2.style.display="none";
    },300);
  };
};

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 面向对象的JavaScript类
May 04 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
7个jQuery最佳实践
Jan 12 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 #Javascript
详解jQuery的表单验证插件--Validation
Dec 21 #Javascript
JS无缝滚动效果实现方法分析
Dec 21 #Javascript
简单实现JS计算器功能
Dec 21 #Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 #Javascript
Bootstrap Search Suggest使用例子
Dec 21 #Javascript
简单实现Bootstrap标签页
Aug 09 #Javascript
You might like
php处理抢购类功能的高并发请求
2018/02/08 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
JavaScript的目的分析
2007/01/05 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python中apply函数的用法实例教程
2014/07/31 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
通过实例了解python property属性
2019/11/01 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
军训考核自我鉴定
2014/02/13 职场文书
2014年项目工作总结
2014/11/24 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
HTML中的表单元素介绍
2022/02/28 HTML / CSS
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers