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. 线程同步中使用信号量AutoResetEvent

    using System; using System.Threading; namespace ConsoleApplication1 { class Program { static void Ma ...

  2. 奇怪吸引子---YuWang

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  3. ImageEdit 加载图片

    从本地加载图片 <dxe:ImageEdit Name="iePortrait" Height="120" Width="100" S ...

  4. 用VisualC++建立SOAP客户端应用(一)

    用VisualC++建立SOAP客户端应用(一) SoapSerializer对象用来构建一个向Web服务发送的SOAP消息.在与服务器连接前,SoapSerializer对象必须与SoapConne ...

  5. ubuntu下安装Node.js（源码安装）

    最近使用hexo的过程中出现了问题,中间载nodejs安装的时候也耽误了些许时间,所以在此记录一下安装的过程. 环境:ubuntu14.0.4LTS,安装nodejs版本node-v0.10.36.t ...

  6. LNMP软件安装所在的目录详细

    LNMP相关软件安装目录Nginx 目录: /usr/local/nginx/MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/usr/local/mysql/var ...

  7. Hive Streaming 追加 ORC 文件

    1.概述 在存储业务数据的时候,随着业务的增长,Hive 表存储在 HDFS 的上的数据会随时间的增加而增加,而以 Text 文本格式存储在 HDFS 上,所消耗的容量资源巨大.那么,我们需要有一种方 ...

  8. Digg Reader 登录不了，原来如此

    cdnjs.cloudflare.com 不能访问,你懂的,给 https://cdnjs.cloudflare.com 跟 http://cdnjs.cloudflare.com 架个梯子就可以了, ...

  9. 一次受限于操作系统进程数的OOM

    在64bit机上跑应用,结果进程刚起来就挂,就刚起来就挂..还OOM,还fork不出新进程,尼玛,这什么情况? 1. 如果是应用层面OOM,那么不应该任何命令都不被执行了,不应该OS直接crash掉. ...

  10. asp.net中使用ueditor

    原文地址:http://blog.uoolo.com/Article/16 还有在MVC中使用ueditor:http://blog.uoolo.com/Article/111 最初百度了一下“编辑器 ...