JavaScript计时事件

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

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

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

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

clearTimeout()//取消setTimeout()。

(1)setTimeout()方法

语法

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

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

setTimeout()的第一个參数是

含有JavaScrip 语句的字符串。

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

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

(2)clearTimeout()方法

语法

  1. clearTimeout(setTimeout_variable);

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

  1. clearTimeout(time);

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

实例一：简单的计时

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>JS计时事件</title>
  7. <script type="text/javascript">
  8. function timeCount()
  9. {
  10.     var time=setTimeout("alert('5秒到了。！！
  11.  
  12. ')",5000);
  13. }
  14. </script>
  15. </head>
  16.  
  17. <body>
  18. <form>
  19. <input type="button" value="開始计时" onClick = "timeCount()" />
  20. </form>
  21. <p>请点击上面的按钮。
  22.  
  23. 警告框会在開始后5秒后显示出来。
  24.  
  25. </p>
  26. </body>
  27. </html>

执行的结果为：

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>JS计时事件</title>
  7. <script type="text/javascript">
  8. function timeCount()
  9. {
  10. var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
  11. var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
  12. var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
  13. }
  14. </script>
  15. </head>
  16.  
  17. <body>
  18. <form>
  19. <input type="button" value="显示计时的文本" onClick="timeCount()" />
  20. <input type="text" id="txt" />
  21. </form>
  22. <p>点击上面的按钮。输入框会显示出已经逝去的时间(2,4,6秒)。</p>
  23. </body>
  24. </html>

执行的结果为：

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>JS计时事件</title>
  7. <script type="text/javascript">
  8. var time;//计时事件变量
  9. var c=0;//文本框显示的数据
  10. function timeCount()
  11. {
  12.     document.getElementById('test').value=c;
  13.     c=c+1;
  14.     time=setTimeout("timeCount()",1000);
  15. }
  16. </script>
  17. </head>
  18.  
  19. <body>
  20. <form>
  21. <input type="button" value="開始计时" onClick = "timeCount()" />
  22. <input type="text" id="test" />
  23. </form>
  24. <p>请点击上面的按钮。输入框会从0開始一直进行计时。</p>
  25. </body>
  26. </html>

点击開始计时button的结果：

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>JS计时事件</title>
  7. <script type="text/javascript">
  8. var time;//计时事件变量
  9. var c=0;//文本框显示的数据
  10. function timeCount()
  11. {
  12.     document.getElementById('test').value=c;
  13.     c=c+1;
  14.     time=setTimeout("timeCount()",1000);
  15. }
  16. function stopCount()
  17. {
  18.     c=0;
  19.     setTimeout("document.getElementById('test').value=0",0);
  20.     clearTimeout(time);
  21. }
  22. </script>
  23. </head>
  24.  
  25. <body>
  26. <form>
  27. <input type="button" value="開始计时" onClick = "timeCount()" />
  28. <input type="text" id="test" />
  29. <input type="button" value="停止计时" onClick="stopCount()" />
  30. </form>
  31. <p>请点击上面的“開始计时”按钮来启动计时器。输入框会一直进行计时，从0開始。
  32.  
  33. <br/>
  34. 点击“停止计时”按钮能够终止计时，并将计数重置为0。</p>
  35. </body>
  36. </html>

点击開始计时的结果：

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

点击停止计时的结果：

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>JS计时事件</title>
  7. <script type="text/javascript">
  8. function startTime()
  9. {
  10.     var today=new Date();
  11.     var hour=today.getHours();
  12.     var minute=today.getMinutes();
  13.     var second=today.getSeconds();
  14. 	//小于10在数字前面家一个0
  15. 	minute=checkTime(minute);
  16.     second=checkTime(second);
  17.     document.getElementById("test").innerHTML=hour+":"+minute+":"+second;
  18.     var time=setTimeout("startTime()",500);
  19. }
  20. function checkTime(i)
  21. {
  22.     if (i<10)
  23.     {
  24.           return i="0" + i;
  25.     }
  26.     else
  27.    {
  28.           return i;
  29.    }
  30. }
  31. </script>
  32. </head>
  33.  
  34. <body onload="startTime()">
  35. <div id="test"></div>
  36. </body>
  37. </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. “System.IO.FileNotFoundException”类型的未经处理的异常在 mscorlib.dll 中发生

    这个错误是我在打包的时候.发现的,由于我移动了我的project的位置(从C盘移动到了D盘),看一下出错的代码: Dim strDB As String = System.Configuration. ...

  2. html与JacaScript中的重要思想：预留后路、向后兼容、js分离

    以一个简单的web程序为例 详细设计模式请配合代码及凝视食用 <!DOCTYPE html> <!-- 1 预留退路:假设用户禁用了js.链接还能正常显示吗?(href) 2 分离j ...

  3. iOS-UIImageView载入网络下载的图片(异步+多线程)

    最原始的载入网络下载的图片方式: //最原始载入网络图片方法,相当堵塞主线程,界面卡顿 -(void)setImageWithURL:(NSString *)imageDownloadUrl{ UII ...

  4. poj2947Widget Factory

    对于同余方程的高斯消元啊. 其实也差不多吧.先同一位通分,然后减一下就好了. 主要是判无解和多解的麻烦,需要注意即使有自由元也可能先无解 #include<cstdio> #include ...

  5. 杂项-建模：BIM

    ylbtech-杂项-建模:BIM 建筑信息模型是建筑学.工程学及土木工程的新工具.建筑信息模型或建筑资讯模型一词由Autodesk所创的.它是来形容那些以三维图形为主.物件导向.建筑学有关的电脑辅助 ...

  6. 使用IDEA 创建 MAVEN 项目

    一,项目创建 1.File---New---project    选择maven       勾选Create from archtype,找到并选择org.apache.maven.archtype ...

  7. python网络编程三次握手和四次挥手

    TCP是因特网中的传输层协议,使用三次握手协议建立连接.当主动方发出SYN连接请求后,等待对方回答SYN+ACK[1],并最终对对方的 SYN 执行 ACK 确认.这种建立连接的方法可以防止产生错误的 ...

  8. TCP基本概念

    TCP协议是一个复杂的.可靠的字节流协议.不通用UDP协议. TCP提供客户与服务器之间的连接.TCP客户先与给定的服务器建立一个连接,再跨该连接与服务器交换数据,最后终止这个连接. TCP提供了可靠 ...

  9. dfs___刷题记录

    poj 1564 给出一个s,n个数,输出所有的能够得到s的方案 #include<cstdio> #include<cstring> #include<iostream ...

  10. 关于Android Studio更新后一直Refreshing的解决办法!

    今天更新了一下studio一直是这个问题 查了很多资料终于解决了 造成这个问题的原因是要更新的gradle版本和studio安装路径中的gradle版本不一致导致的 把他们改成一致的即可 在这个目录里 ...