轻松学习JavaScript十七:JavaScript的BOM学习(二)
来源:互联网 发布:淘宝发错货还用退回吗 编辑:程序博客网 时间:2024/05/21 20:22
通过使用JavaScript中的BOM对象中的window对象的两个方法就是setTimeout()方法和claerTimeout()方法,我们
有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在JavaScritp中使用计时事件是很容易的,两个关键方法是:
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>
运行的结果为:
实例二:另一个简单的计时
<!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>
运行的结果为:
实例三:一个无穷循环的计时事件
<!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>点击开始计时按钮的结果:
实例四: 带有停止按钮的无穷循环中的计时事件
<!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>
点击开始计时的结果:
点击停止计时的结果:
这个实例其实在前面的博文中已经使用过:
<!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在数字前面家一个0minute=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>
运行的结果为:
- 轻松学习JavaScript十七:JavaScript的BOM学习(二)
- 轻松学习JavaScript十六:JavaScript的BOM学习(一)
- 轻松学习JavaScript十六:JavaScript的BOM学习(一)
- 轻松学习JavaScript十五:JavaScript之BOM简介
- 轻松学习JavaScript二十七:DOM编程学习之事件模型
- 轻松学习JavaScript二:JavaScript语言的基本语法要求
- 轻松学习JavaScript二:JavaScript语言的基本语法要求
- javascript 学习(二) BOM & DOM
- JavaScript学习笔记(二十七) 常量
- JavaScript学习笔记二十七:Promise
- JavaScript学习2-BOM
- Javascript学习08-BOM
- javascript学习(5) Bom学习
- JavaScript关于BOM的初步学习
- javaScript----BOM和DOM的学习
- JavaScript学习笔记(十七) 方法的属性
- 怎么轻松学习JavaScript
- 怎么轻松学习JavaScript
- mysql的数据备份和恢复
- Linux下高并发socket最大连接数所受的限制问题
- C++primer--拷贝控制__构造函数和析构函数的执行时期
- C语言冒泡排序及选择排序优化<代码>
- 深入理解计算机系统 1.8 系统通过网络与其它系统交流
- 轻松学习JavaScript十七:JavaScript的BOM学习(二)
- PHP访问MySQL几种方法
- Majority Element I&II | Leetcode
- 关于微信原生支付(扫码支付)的两种支付模式的理解和比较...
- ListView子布局样式有多个的处理
- 【LEETCODE】205-Isomorphic Strings
- OC学习_3_关于封装
- HDU 1257 最少拦截系统 贪心
- php-简单计算器