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. 你的项目真的需要Session吗？

    在web开发中,Session这个东西一直都很重要,至少伴随我10年之久, 前一段时间发生一个性能问题,因为Redis session 问题,后来想想 其实我的项目session 是不需要的. 先看看 ...

  2. fine-uploader 5.11.8 (最新版) 使用感受

    以前测试和使用过 3.X 因为够用,所以一直没升级,今天闲来无聊测试了一下最新版.和3.X比性能上好了很多,但不支持了移动设备的多文件上传. 关于3.X版 可以看这里:http://www.cnblo ...

  3. Socket原理与编程基础（转）

    一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...

  4. 转载：Cellebrite携两大移动数据服务强势来华

    [IT168专稿]随着移动互联网的发展,智能终端也越来越普及,围绕整个移动互联网的产业链产生了巨大的商机.有这么一家做移动数据传输服务的厂商,他们一直专注在移动领域,为运营商和零售商以及司法部门提供服 ...

  5. HiveServer2 的jdbc方式创建udf的修改（add jar 最好不要使用），否则会造成异常： java.sql.SQLException: Error while processing statement: null

    自从Hive0.13.0开始,使用HiveServer2 的jdbc方式创建udf的临时函数的方法由: ADD JAR ${HiveUDFJarPath} create TEMPORARY funct ...

  6. android设置背景半透明效果

    1.Button或者ImageButton的背景透明或者半透明 半透明:<Button android:background="#e0000000"···> 透明:&l ...

  7. VirtualBox不能为虚拟电脑 Ubuntu 打开一个新任务

    今天在用Vbox中的Ubuntu系统准备测试Python代码时,Vbox报了一个错误:"不能为虚拟电脑 Ubuntu 打开一个新任务".因为之前用的时候还好好的,也不知道是不是最近 ...

  8. Navi.Soft30.开放平台.腾讯.开发手册

    1系统简介 1.1功能简述 现在是一个信息时代,并且正在高速发展.以前获取信息的途径非常少,可能只有电视台,收音机等有限的来源,而现在的途径数不胜数,如:QQ,微信,官方网站,个人网站等等 本开发手册 ...

  9. iPhone私有API

    一．基本知识 iPhone中的API除了公开的API:Published API外(或者叫文档中记录的API:Documented API),还有两类API:私有API:Private API和未公开 ...

  10. WCF实例上下文模式与并发模式对性能的影响

    实例上下文模式 InstanceContextMode 控制在响应客户端调用时,如何分配服务实例.InstanceContextMode 可以设置为以下值: •Single – 为所有客户端调用分配一 ...