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 相关文章推荐
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
JavaScript表单验证开发
Nov 23 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 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中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
红头文件任命书范本
2014/06/05 职场文书
大学生作弊检讨书
2014/09/11 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
银行招聘自荐信
2015/03/06 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技