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. 可编程数据平面将OpenFlow扩展至电信级应用（二）

    可编程数据平面将OpenFlow扩展至电信级应用(二) 案例:基于WinPath网络处理器的电信极OpenFlow (CG-OF)client实现 作者:Liviu Pinchas, Tao Lang ...

  2. POJ3249 Test for Job(拓扑排序+dp)

    Test for Job Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 10137   Accepted: 2348 Des ...

  3. [jzoj 5662] 尺树寸泓 解题报告 (线段树+中序遍历)

    interlinkage: https://jzoj.net/senior/#contest/show/2703/1 description: solution: 发现$dfs$序不好维护 注意到这是 ...

  4. java多线程 interrupt(), interrupted(), isInterrupted()方法区别

    interrupt()方法: 作用是中断线程. 本线程中断自身是被允许的,且"中断标记"设置为true 其它线程调用本线程的interrupt()方法时,会通过checkAcces ...

  5. Java基础——类和对象的初始化过程

    本节把类和对象的初始化所涉及到的所有代码块阐述一边. 示例代码: public class Demo { private static String name; private String age; ...

  6. 利用 js 获取地址栏参数

    1.aspx页面,进行页面跳转 window.location.href = "ProviderInfo.aspx?ProviderID="+ProviderID; 2.Provi ...

  7. IIS的安装与配置详细图解教程

    IIS是Internet Information Services(互联网信息服务)的简称,是有微软公司提供的基于在windows操作系统环境下运行的互联网服务.此处将介绍如何安装配置IIS来构架自己 ...

  8. 防范CSRF（三）

    除了可以更改微软默认的cookie的名字外,还可以更改默认的加密方法.继承IAntiForgeryAdditionalDataProvider接口,实现里面的方法即可. 采用的加密方法有加盐和使用时间 ...

  9. 如何将App从一个账号迁移到另一个账号？

    App迁移(App transfer):将App从一个开发者账号迁移至另一个开发者账号.此文演示了整个迁移过程,为了方便解释,在此过程中,将App转出的开发者账号我们下文将会称之为A账号,接收杭州Ap ...

  10. CSS背景使用，引入、尺寸、平铺、定位、多重背景

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...