对应智能社：09 定时器的使用

开启定时器：

 setInterval(xxx(),1000);//间隔型 第一个参数为函数，第二个为时间，单位为毫秒

 setTimeout(xxx(),1000);//延时型

 停止定时器：

clearInterval(timer);//参数为setInterval()函数的返回值，返回值实际上是一个number

clearTimeout(timer);//参数为setTimeout()函数的返回值，返回值实际上是一个number

　

setInterval(a,1000);

其中参数一为一个函数名，第二个为一个数值，单位为毫秒。

function a(){

	console.log('wyl');

}

setInterval(a,1000)

　　setInterval 的会一直执行，简直停不下来。

与之对应的是setTimeout则只执行一次。这就是二者的区别。

附上自己写的数码时钟：

<html>

	<HEAD>

		<meta charset="utf-8">

		<title> 数码时钟</title>

		<script type="text/javascript">

				window.onload = function(){

					xx();//一加载就立刻执行

					setInterval(xx,1000);

				};

				function xx(){

					var date = new Date();

						var hours = to_doub(date.getHours());

						var min = to_doub(date.getMinutes());

						var sec = to_doub(date.getSeconds());

						var str = ''+hours+min+sec;

						var img = document.getElementsByTagName('img');

						var len = img.length;

						for(var i=0;i<len;i++){

							img[i].src = "img/"+str[i]+".png";

						}

				}

				// 比如时间为 01 23 43 秒，01时要显示为01而不能显示为1，

				function to_doub(n){

					if(n<10){

						return '0'+n;

					}

					else{

						return ''+n;

					}

				}

		</script>

	</HEAD>

	<body style="background:grey; ">

		<img src="img/0.png">

		<img src="img/2.png">

		<img src="img/4.png">

		<img src="img/5.png">

		<img src="img/4.png">

		<img src="img/1.png">

	</body>

</html>

　　x效果图如下：

另一个例子：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

	div {float:left; margin:20px}

	#div1 {width:50px; height:50px; background:red;}

	#div2 {width:100px; height:100px; background:#0CF; display:none}

</style>

	<script>

		window.onload = function(){

    		var oDiv1 = document.getElementById('div1');

			var oDiv2 = document.getElementById('div2');

			var timer = null;

			oDiv1.onmouseover = function(){

					oDiv2.style.display = "block";//显示

				}

			oDiv1.onmouseout = function(){

					timer = setTimeout(function(){

							oDiv2.style.display = "none";//隐藏

						},500);

				}

			oDiv2.onmouseover = function(){

					clearTimeout(timer);

					oDiv2.style.display = "block"; //显示

				}

			oDiv2.onmouseout = function(){

					oDiv2.style.display = 'none';

				}

    	}

	</script>

</head>

<body>

	<div id="div1"></div>

    <div id="div2"></div>

</body>

</html>

　　效果图如下：

20150706 js之定时器的更多相关文章

  1. js延时定时器

    // 获取图片方向延时器 getImageOrientationTimer(context) { if (context.imageTimeout) return; if (context.image ...

  2. 【JavaScript基础】Js的定时器（你想看的原理也在哟）

    [JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...

  3. JS实现定时器

    导出:jquery.timers-1.2.js jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. ...

  4. js 关于定时器的知识点。

    Js的同步和异步 同步:代码从上到下执行. 异步:每个模块执行自己的,同时执行. js本身就是同步的,但是需要记住四个地方是异步. Js的异步   1.定时器  2.ajax   3事件的绑定  4. ...

  5. 关于js中定时器的返回值问题

    在js中,我们常常会用到定时器来处理各种各样的问题,当我们需要清除定时器的时候,我们常常会定义一个值来接受定时器的返回值,然后再把定义好的这个值写到清除定时器的括弧后面,如: var times = ...

  6. js 面向对象 定时器 046

    获取DOM对象补充 document.getElementsByTagName('div'); //获取的多个DOM对象 这种对象叫伪数组 如果想遍历此对象 通过for(var i=0; i < ...

  7. 【笔记】js 关于定时器的理解

    总所周知 js 里面的 setTimeout() 方法是用来设定某些功能在某段时间间隔之后执行的.但是今天看了高程对定时器的描述发现并不是这样. setTimeout(function(){ //.c ...

  8. js之定时器

    一.通过定时器我们可以间隔设定时间重复调用某个函数,利用这个特性,我们可以做很多事,例如,12306上的每间隔5秒查询自动查询一次余票,简单动画的实现等等 二.定时器的格式: 定时器有两种格式,分别是 ...

  9. js清除定时器注意点

    如何这篇文章所述:https://www.cnblogs.com/mmykdbc/p/7418575.html js多次调用创建定时器的函数,会使定时器速度越来越快,多次调用定时器的使用场景比如:监听 ...

随机推荐

  1. eclipse maven SLF4J: Failed to load class org.slf4j.impl.StaticLoggerBinder

    现象:运行eclipse maven build,console 有红色日志如下: SLF4J: Failed to load class "org.slf4j.impl.StaticLog ...

  2. IOS 学习笔记(4) 控件 标签(UILabel)的使用方法

    虽说Label的中文翻译是标签标记,但它其实是一个静态文本内容的展现控件. 一般来说,UILabel只是一个只读的文本视图,开发者可以利用UiLabel来展示内容长度有固定上限的文字内容.并且,UIL ...

  3. 用于COB工艺的PCB设计指导

    绑定角度尽量在45°之内,多于这个角度,绑定时候,银线不好打入焊盘.而且打入焊盘的尾部可能短路到相邻的焊盘,绑定焊盘之间的间距一般在4MIL为极限,半场的工艺一般就这样了.而且焊盘离被绑定的IC引脚最 ...

  4. QT 获取文件MD5值

    /* 方法1 */ QFile theFile(fileNamePath); theFile.open(QIODevice::ReadOnly); QByteArray ba = QCryptogra ...

  5. 带你一起Piu Piu Piu~

    单刀直入,今天要讲的是自己写的一个WPF动画例子.我们在看下最终效果~ 最近在重看WPF编程宝典2010,在练习第15章动画性能例子时有了些想法.原始例子如下:  原始例子(打包了整个15章的) 它是 ...

  6. 移动服务和 Azure Active Directory 中基于角色的访问控制

    编辑人员注释:本文章由 Matthew Henderson撰写 去年 11月,我们发布了 Azure Active Directory (AAD) 预览版作为移动服务身份提供程序.此举旨在为企业开 ...

  7. HDU 1286 找新朋友

    题解:分析题目,就是一个裸的欧拉函数,于是AC. #include <cstdio> int eular(int n){ int ret=1,i; for(i=2;i*i<=n;i+ ...

  8. java面试复习 I

    1 多线程 在程序开发中只要是多线程肯定永远以实现Runnable接口为主,因为实现Runnable接口相比继承Thread类有如下好处: 避免点继承的局限,一个类可以继承多个接口. 适合于资源的共享 ...

  9. jQuery ajax在GBK编码下表单提交终极解决方案（非二次编码方法）(转)

    版权声明]:版权归作者所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.open-lib.com/Forum/Read_69_1.action 前言: 当jquery ...

  10. BFG

    "/"应用程序中的服务器错误. 配置错误 说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息: 提供程序集合中不 ...