JavaScript计时事件

通过使用JavaScript中的BOM对象中的window对象的两个方法就是setTimeout()方法和claerTimeout()方法，我们

有能力作到在一个设定的时间间隔之后来运行代码。而不是在函数被调用后马上运行。我们称之为计时事件。

在JavaScritp中使用计时事件是非常easy的。两个关键方法是:

setTimeout()//未来的某时运行代码。

clearTimeout()//取消setTimeout()。

(1)setTimeout()方法

语法

var time=setTimeout("javascript语句",毫秒);

setTimeout()方法会返回某个值。在上面的语句中。值被储存在名为time的变量中。

setTimeout()的第一个參数是

含有JavaScrip 语句的字符串。

这个语句可能诸如 "alert('5 seconds!')"。或者对函数的调用，诸如 alertMsg()"。第二

个參数指示从当前起多少毫秒后运行第一个參数(提示：1000 毫秒等于一秒)。

(2)clearTimeout()方法

语法

clearTimeout(setTimeout_variable);

假如你希望取消上面的setTimeout()。你能够使用这个time变量名来指定它。也就是能够这样写：

clearTimeout(time);

那么以下我们就来说几个实例：

实例一：简单的计时

<!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=gb2312" />

<title>JS计时事件</title>

<script type="text/javascript">

function timeCount()

{

    var time=setTimeout("alert('5秒到了。！！

')",5000);

}

</script>

</head>

<body>

<form>

<input type="button" value="開始计时" onClick = "timeCount()" />

</form>

<p>请点击上面的按钮。

警告框会在開始后5秒后显示出来。

</p>

</body>

</html>

执行的结果为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

实例二：还有一个简单的计时

<!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=gb2312" />

<title>JS计时事件</title>

<script type="text/javascript">

function timeCount()

{

var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)

var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)

var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)

}

</script>

</head>

<body>

<form>

<input type="button" value="显示计时的文本" onClick="timeCount()" />

<input type="text" id="txt" />

</form>

<p>点击上面的按钮。输入框会显示出已经逝去的时间(2,4,6秒)。</p>

</body>

</html>

执行的结果为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

实例三：一个无穷循环的计时事件

<!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=gb2312" />

<title>JS计时事件</title>

<script type="text/javascript">

var time;//计时事件变量

var c=0;//文本框显示的数据

function timeCount()

{

    document.getElementById('test').value=c;

    c=c+1;

    time=setTimeout("timeCount()",1000);

}

</script>

</head>

<body>

<form>

<input type="button" value="開始计时" onClick = "timeCount()" />

<input type="text" id="test" />

</form>

<p>请点击上面的按钮。输入框会从0開始一直进行计时。</p>

</body>

</html>

点击開始计时button的结果：

实例四：  带有停止button的无穷循环中的计时事件

<!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=gb2312" />

<title>JS计时事件</title>

<script type="text/javascript">

var time;//计时事件变量

var c=0;//文本框显示的数据

function timeCount()

{

    document.getElementById('test').value=c;

    c=c+1;

    time=setTimeout("timeCount()",1000);

}

function stopCount()

{

    c=0;

    setTimeout("document.getElementById('test').value=0",0);

    clearTimeout(time);

}

</script>

</head>

<body>

<form>

<input type="button" value="開始计时" onClick = "timeCount()" />

<input type="text" id="test" />

<input type="button" value="停止计时" onClick="stopCount()" />

</form>

<p>请点击上面的“開始计时”按钮来启动计时器。输入框会一直进行计时，从0開始。

<br/>

点击“停止计时”按钮能够终止计时，并将计数重置为0。</p>

</body>

</html>

点击開始计时的结果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

点击停止计时的结果：

实例五：使用计时事件制作的钟表

        这个实例事实上在前面的博文中已经使用过：

<!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=gb2312" />

<title>JS计时事件</title>

<script type="text/javascript">

function startTime()

{

    var today=new Date();

    var hour=today.getHours();

    var minute=today.getMinutes();

    var second=today.getSeconds();

	//小于10在数字前面家一个0

	minute=checkTime(minute);

    second=checkTime(second);

    document.getElementById("test").innerHTML=hour+":"+minute+":"+second;

    var time=setTimeout("startTime()",500);

}

function checkTime(i)

{

    if (i<10)

    {

          return i="0" + i;

    }

    else

   {

          return i;

   }

}

</script>

</head>

<body onload="startTime()">

<div id="test"></div>

</body>

</html>

执行的结果为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

轻松学习JavaScript十七：JavaScript的BOM学习(二)的更多相关文章

  1. JavaScript学习总结(十七)——Javascript原型链的原理

    一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...

  2. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  3. Javascript学习笔记1 javascript的特点

    ..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...

  4. 再起航，我的学习笔记之JavaScript设计模式06(抽象工厂模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...

  5. 再起航，我的学习笔记之JavaScript设计模式07(抽象工厂模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...

  6. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  7. 前端学习笔记之JavaScript

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...

  8. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

  9. 微信小程序开发：学习笔记[5]——JavaScript脚本

    微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...

  10. 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)

    其他网站开发相关资料            超强HTML和xhtml,CSS精品学习资料下载汇总                                               最新htm ...

随机推荐

  1. centos下yum安装lamp和lnmp轻松搞定

    centos下yum安装lamp和lnmp轻松搞定.究竟多轻松你看就知道了.妈妈再也不操心不会装lamp了. 非常辛苦整理的安装方法,会持续更新下去.凡无法安装的在评论里贴出问题来,会尽快解决.共同维 ...

  2. NSAttributedString编程

    - (void)viewDidLoad {     [super viewDidLoad];          NSMutableAttributedString *attributedString ...

  3. bzoj1588: [HNOI2002]营业额统计(splay)

    1588: [HNOI2002]营业额统计 题目:传送门 题解: 复习splay所以来刷个水... 题目描述不是特别清楚:应该是找第i天以前一个最小的营业额和第i天做差的最小值作为第i天的最小波动值 ...

  4. 院校-德国：亚琛工业大学(RWTH)

    ylbtech-院校-德国:亚琛工业大学(RWTH) 1.返回顶部 1. 亚琛工业大学(RWTH)成立于1870年,是德国著名理工类大学之一,也是世界顶尖理工类大学之一 ,长久以来被誉为“欧洲的麻省理 ...

  5. php global GLOBALS[]变量

    $a=123; function aa() { Global $a; //如果不把$a定义为global变量,函数体内是不能访问函数体外部的$a的,但是可以定义一个相同的名字$a,此时这个变量是局部变 ...

  6. 剑指offer——01二维数组中的查找（Python3）

    题目:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...

  7. 客户现场调试（连接oracle数据库）

    1.System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本 http://blog.csdn.net/yucaoye/article/details/ ...

  8. python之路——装饰器函数

    阅读目录 楔子 装饰器的形成过程 开放封闭原则 谈装饰器主要功能和装饰器固定结构 带参数的装饰器 多个装饰器装饰一个函数 返回顶部 楔子 作为一个会写函数的python开发,我们从今天开始要去公司上班 ...

  9. Spark的数据存储（十九）

    Spark本身是基于内存计算的架构,数据的存储也主要分为内存和磁盘两个路径.Spark本身则根据存储位置.是否可序列化和副本数目这几个要素将数据存储分为多种存储级别.此外还可选择使用Tachyon来管 ...

  10. pgpool中定义的数据库节点及pgpool支持的复制模式

    /* * The first DB node id appears in pgpool.conf or the first "live" DB * node otherwise.  ...