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. js 排列 组合 的一个简单例子

    最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...

  2. 深入学习golang(5)—接口

    接口 概述 如果说goroutine和channel是Go并发的两大基石,那么接口是Go语言编程中数据类型的关键.在Go语言的实际编程中,几乎所有的数据结构都围绕接口展开,接口是Go语言中所有数据结构 ...

  3. spring-boot 加载本地静态资源文件路径配置

    1.spring boot默认加载文件的路径是 /META-INF/resources/ /resources/ /static/ /public/ 这些目录下面, 当然我们也可以从spring bo ...

  4. AYUI快速开发2016-6-29 ，全部免费,WPF普遍之路梦想开启

    下载开发模板:下载 AYUI 6月29日起,免费使用,无需授权,去除所有限制,关爱开发者,不求捐赠,只要你们能私活挣到钱就行,你们没有欠我的.我希望所有人都能开发WPF的东西 使用教程,上面的下载文件 ...

  5. 利用条件运算符的嵌套来完成此题：学习成绩> =90分的同学用A表示，60-89分之间的用B表示，60分以下的用C表示。

    利用条件运算符的嵌套来完成此题:学习成绩> =90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. import java.util.Scanner; public clas ...

  6. 获取枚举类型的描述description

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...

  7. wordpress图片水印插件DX-Watermark

    DX-Watermark是一款功能齐全的wordpress图片水印插件,可以自动给上传的图片添加文本或者图片水印. 后台截图: 文本水印: 图片水印: 选项说明: 类型:可选择文本或图片水印两种类型, ...

  8. android: adapter getView(position==0) was invoked many times.

    this is a big problem for me. i follow the solutions that i  searched from the internet: modify the ...

  9. 关于Linux session管理与GUI架构

    google了一下感觉一下子找不到太好的资料,可能需要慢慢深入去学习. 这里有一个讲session management的,还算比较深入: https://dvdhrm.wordpress.com/2 ...

  10. mac vim 使用

    再使用Mac编辑文件时感觉非常不爽,没有语法高亮,只能通过设置改变所有字体为同一个颜色,看起来还是别扭, 于是找到方法使用vim时可以实现语法高亮显示,操作步骤如下: 1.进入/usr/share/v ...