轻松学习JavaScript十七:JavaScript的BOM学习(二)
通过使用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>
执行的结果为:
实例二:还有一个简单的计时
<!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>
点击開始计时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>
点击開始计时的结果:
点击停止计时的结果:
实例五:使用计时事件制作的钟表
这个实例事实上在前面的博文中已经使用过:
<!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 οnlοad="startTime()">
<div id="test"></div>
</body>
</html>
执行的结果为:
轻松学习JavaScript十七:JavaScript的BOM学习(二)相关推荐
- JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)...
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- 前端技术学习第四讲:JavaScript中DOM和BOM
JavaScript中DOM和BOM 一.DOM和BOM DOM:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与 ...
- 【学习】自学JavaScript
第一章 JavaScript简介 1.1.JavaScript的起源 JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证.所谓的前端验证,就是指检查用户输入的内容是否符合一定 ...
- JS学习笔记(JavaScript基础学习必备)
讲解JavaScript 基础语法.关键特性.JSON.WebAPI 等知识点.涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作. 文章目录 一.JavaScript 基础 1.什么是 ...
- Python、JavaScript、Go、Linux学习资料总结
Python 因为对Python还蛮感兴趣的,所以总结一下Python学习资料,包括三部分: 可以学习Python的地方:如果你也想学Python的话,那么可以在这些地方进行学习: Python可以做 ...
- JavaScript学习总结(九)——Javascript面向(基于)对象编程
转载自 JavaScript学习总结(九)--Javascript面向(基于)对象编程 一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了 ...
- JavaScript学习总结(八)——JavaScript数组
转载自 JavaScript学习总结(八)--JavaScript数组 JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.Array ...
- JavaScript学习总结(七)——JavaScript函数(function)
转载自 JavaScript学习总结(七)--JavaScript函数(function) 一.函数基本概念 为完成某一功能的程序指令(语句)的集合,称为函数. 二.JavaScript函数的分类 ...
- JavaScript学习总结(一)——JavaScript基础
转载自 JavaScript学习总结(一)--JavaScript基础 一.JavaScript语言特点 1.1.JavaScript是基于对象和事件驱动的(动态的) 它可以直接对用户或客户输入做 ...
- 【Javascript】javascript学习 六 七 JavaScript 变量/运算符
变量是用于存储信息的容器: x=5; length=66.10; 还记得在学校里学过的代数吗? 当您回忆在学校学过的代数课程时,想到的很可能是:x=5, y=6, z=x+y 等等. 还记得吗,一个字 ...
最新文章
- OpenStack 通用设计思路 - 每天5分钟玩转 OpenStack(25)
- Linux中的进程创建函数fork
- git merge最简洁用法
- Linux RAID1和RAID5的区别
- ubuntu命令模式中文乱码
- 华为鸿蒙宣传悟空视频_华为自研鸿蒙系统定档9月?《悟空》微电影透露玄机...
- 电商项目实战项目需求以及技术选型
- oracle日常维护(不断更新)
- 笨办法学 Python · 续 练习 11:`uniq`
- 拳打苹果 脚踢三星 国产品牌占据泰国手机市场超半数份额!
- 计算机应用基础 东师 离线,东师1609计算机应用基础离线作业(8页)-原创力文档...
- 疯狂.NET 通用权限设计 C\S后台管理,B\S前台调用源码样例程序源码下载之 --- 操作权限...
- JavaScript 类式继承与原型继承
- iOS 提交app到iTunes Connect,显示构建版本“+”号的小技巧/ 选择版本提交 无“+”号 问题/Xcode 上传成功但iTunes 不显示上传的版本的问题
- 想做出高级又好看的PPT,这9个技巧你别错过
- decimal 占位吗 负数_如何获取BigDecimal的负数
- linux上删除rime方案_Linux中Rime输入法安装使用小结
- 电脑如何打开虚拟化设置?
- Android 蓝色光滤波器(护眼神器) 反编译
- 国外和国内高校官网的差异
热门文章
- sql 列求和_Excel VBA高级编程SQL检索(二)合并相同项并求和
- 学习LOAM笔记——特征点提取与匹配
- 有三AI正式跨入2.0,诚邀参与内容创作以及广告须知
- 全球及中国衣柜香氛市场投资份额与营销潜力研究报告2022版
- 全球及中国烯丙基硫脲行业十四五需求产量及投资规模预测报告2022版
- 全球与中国自行车和零件制造市场发展规划及未来投资趋势展望报告2021年版
- conn.execute的用法
- java rocketmq消费_rocketmq消费负载均衡--push消费详解
- 加快发展设施业 农业大健康-林裕豪:从玉农业践行基础支撑
- at( ) [ ]