JavaScript 一个设定的时间间隔之后来执行代码，称之为计时事件。
 
主要通过两个方法来实现：
    1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    2.setTimeout() - 暂停指定的毫秒数后执行指定的代码
    并且，这两个方法都是window对象的方法。
 
一、setInterval()方法
    该方法值得是间隔一定的毫秒数不停的执行指定的代码。
    语法：window.setInterval(”js代码，函数等“，毫秒数);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计时器-setInterval</title>
	</head>
	<body>
		<form>
			<input type="button" value="开始计数" onclick="start()" />
			<input type="button" value="停止计数" onclick="stop()" />
		</form>
		<div id="div2"></div>
		<script type="text/javascript">
			var a=0;
			var timer = null;
			function start(){
				timer = setInterval(function(){
					a ++;
					document.getElementById("div2").innerHTML = "计数："+a;
				},1000);
			}
			function stop(){
				clearInterval(timer);
			}
		</script>
	</body>
</html>

二、setTimeout()方法
    指的是指定的毫秒数后执行指定的代码或方法。
    语法：window.setTimeout("javascript 函数",毫秒数);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计时器-setTimeout</title>
	</head>
	<body>
		<form>
			<input type="button" value="三秒后执行" onclick="count()" /><br /><br />
		</form>
		<div id="div1"></div>
		<hr />
		<form>
			<input type="button" value="开始计数" onclick="start()" />
			<input type="button" value="停止计数" onclick="stop()" /><br /><br />
		</form>
		<div id="div2"></div>
		<script type="text/javascript">
			function count(){
				//setTimeout("alert('时间到了')",3000);
				setTimeout(function(){
					hide();
				},3000);
			}
			function hide(){
				var div1 = document.getElementById('div1');
				div1.innerHTML = "hello world";
				div1.style.height = div1.offsetHeight+200+"px";
				div1.style.background = "red";
			}
			var a=0;
			var timer = null;
			function start(){
				a += 1;
				document.getElementById("div2").innerHTML = "计数："+a;
				timer = setTimeout("start();",1000);
			}
			function stop(){
				clearTimeout(timer);
			}
		</script>
	</body>
</html>

最后再强调：

setTimeout        在某个时间以后执行一个函数（只执行1次）
setInterval        让程序每个一定时间来调用函数1次

js-计时事件的更多相关文章

  1. js计时事件

    通过在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件. 1. setTimeout()--暂停指定的时间后执行指定的代码 clearTimeout ()--停止se ...

  2. js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）

    javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...

  3. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  4. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  5. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  6. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  7. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  8. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  9. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  10. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

随机推荐

  1. ElasticSearch + Kibana

    关键词: 数据可视化 数据分析 数据爬虫 信息检索(搜索引擎) ElasticSearch是基于Lucene的分布式搜索引擎,提供多种插件及配套工具. 其中Kibana可以“关联”ES中的数据集,进行 ...

  2. 从零开始--系统深入学习IOS(使用Swift---带链接)

    这是一篇面向IOS新手的文档.同时提供一些系统知识的链接,让你系统学习IOS.它提供一些信息帮助你采用技术和编程接口来开发苹果软件产品,本人不保证会在将来更新.学习它,需要你掌握一些基本的编程知识 1 ...

  3. 传统认知PK网络认知 刚子扯谈烤串认知

    文/刚子 2013.7.23 提到认知,有太多的介绍,我就不在秀理论文字了,那样等于自我抄袭式的传播给大家,对于大家也没意思,可以推荐大家到百度里面搜索下”认知结构”,介绍的比我详细.同行老陈说的! ...

  4. [Aaronyang]谈谈2015年AY对WPF全面技术总结40多篇WPF，炫到没朋友的AYUI来了

             原著:AY WPF博客- 把wpf推广出去,让那些鄙视的人说不 大家好! 我是AY,首先声明,我在做一件很枯燥的事情,我是个91后程序员,每天熬夜完成计划的过着下班后的生活. 那天有 ...

  5. Andriod调用http请求

    // 新建HttpPost对象 HttpPost httpPost = new HttpPost( "http://180.153.1.1:8080/mybankGateway/gatewa ...

  6. 图像拼接 SIFT资料合集

    转自 http://blog.csdn.net/stellar0/article/details/8741780 分类: 最近也注意一些图像拼接方面的文章,很多很多,尤其是全景图拼接的,实际上类似佳能 ...

  7. Mac 下安装mitmproxy

    环境:  Mac OS X 10.9.4 1. 安装 直接用pip 安装 pip install mitmproxy 发现在安装依赖包 lxml 的时候报错 In : /private/tmp/pip ...

  8. Android杂谈--小知识点总结（1）

    此知识点总结是开发过程中遇到的比较棘手或者恶心的地方,所以随时更新,以备不时之需 1. viewFlipper中的item如何动态设置高度? 例如: <ViewFlipper android:l ...

  9. Git回滚远程版本

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “房子是租的 但生活不是” 1.故事的开始 远程master分支下代码被不小心提交了很多垃圾代码 ...

  10. 哈夫曼算法（haffman）实现压缩和解压缩-C语言实现

    /* * ===================================================================================== * * Filen ...