轻松学习JavaScript十七：JavaScript的BOM学习(二)
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学习(二)的更多相关文章
- JavaScript学习总结(十七)——Javascript原型链的原理
一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- Javascript学习笔记1 javascript的特点
..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...
- 再起航，我的学习笔记之JavaScript设计模式06(抽象工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...
- 再起航，我的学习笔记之JavaScript设计模式07(抽象工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...
- JavaScript学习(1)之JavaScript基础
JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...
- 前端学习笔记之JavaScript
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- 微信小程序开发：学习笔记[5]——JavaScript脚本
微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...
- 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)
其他网站开发相关资料 超强HTML和xhtml,CSS精品学习资料下载汇总 最新htm ...
随机推荐
- sqlite学习笔记7：C语言中使用sqlite之打开数据库
数据库的基本内容前面都已经说得差点儿相同了.接下看看如何在C语言中使用sqlite. 一 接口 sqlite3_open(const char *filename, sqlite3 **ppDb) 打 ...
- ROS-Gazebo文件标签解读
前言:Gazebo是一个三维机器人仿真器,它是独立的软件,支持ROS. 标签 功能 <gazebo> 设置Gazebo仿真的参数 <mu1>, <mu2> 设置摩擦 ...
- [转]数据库事务中的隔离级别和锁+spring Transactional注解
数据库事务中的隔离级别和锁 数据库事务在后端开发中占非常重要的地位,如何确保数据读取的正确性.安全性也是我们需要研究的问题.ACID首先总结一下数据库事务正确执行的四个要素(ACID): 原子性(At ...
- Java 系列之Filter（一）
一.过滤器 过滤器就是在源数据和目的数据之间起过滤作用的中间组件.它可以截取客户端和资源之间的请求和响应信息,并且对这些信息进行过滤. 二.应用场景 1.对用户请求进行统一认证 2.对用户的访问请求进 ...
- （转载）Android快速开发偷懒必备，一句话搞定所有ViewGroup的Adapter . 支持自定义ViewGroup
[置顶] [Android]快速开发偷懒必备,一句话搞定所有ViewGroup的Adapter . 支持自定义ViewGroup 标签: androidAdapter快速开发0耦合 2016-12-1 ...
- 利用 js 获取地址栏参数
1.aspx页面,进行页面跳转 window.location.href = "ProviderInfo.aspx?ProviderID="+ProviderID; 2.Provi ...
- android webview一些注意事项（持续更新）
1.loadUrl() 的参数必须“http://”开头: 2.如果用到内部类获取页面内容,此类不能混淆: 3.2中情况保持不混淆需要将webview所在的包都保持不混淆,常规的保持类不混淆不生效: ...
- ViewPager滑动到最后一页再向左滑动进入主界面
在OnPageChangeListener中的onPageScrolled方法里判断 @Override public void onPageScrolled(int arg0, float arg1 ...
- HDU 1213 How Many Tables【并查集】
解题思路:和畅通工程类似,问最后还剩下几个不连通的区域. How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...
- Java并发--安全发布对象
单例模式 懒汉模式:多线程非线程安全,在多线程中,可能会产生多个对象 饿汉模式:线程安全. 类加载的时候初始化,不推荐在构造函数需要做耗时操作的时候使用,因为可能导致类加载缓慢,而且可能初始化后并没有 ...