Javascript进阶篇——浏览器对象—JavaScript计时器
---恢复内容开始---
JavaScript 计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
//1. 代码：要调用的函数或要执行的代码串。
//2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
//或
setInterval(clock,1000)
我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>
例：定时器获取时间，格式"时:分:秒"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var attime;
function clock(){
var time=new Date();
attime= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
document.getElementById("clock").value = attime;
}
setInterval(clock);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>
运行结果：
取消计时器clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：
clearInterval(id_of_setInterval)
//参数说明:
//id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒调用clock函数，并将返回值赋值给i
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>
计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
//参数说明：
//1. 要调用的函数或要执行的代码串。
//2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
当我们打开网页3秒后，在弹出一个提示框，代码如下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>
当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>
要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>
使用setTimeout()实现计数统计效果，并在文本框中显示数值。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",1000);
}
setTimeout("startCount()",1000);
</script>
</head>
<body>
<form>
<input type="text" id="count"/>
</form>
</body>
</html>
取消计时器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止计时器。
语法:
clearTimeout(id_of_setTimeout)
//参数说明:
//id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
//取消计时器，停止
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>
取消计时器。点击Start按钮后，开始计数。点击Stop按钮后，停止计数。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick = startCount()/>
<input type="button" value="Stop" onclick = stopCount()/>
</form>
</body>
</html>
Javascript进阶篇——浏览器对象—JavaScript计时器的更多相关文章
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--浏览器对象
1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:
- Javascript进阶篇——浏览器对象—Location、Navigator、userAgent、screen对象
Location对象location用于获取或设置窗体的URL,并且可以用于解析URL.语法: location.[属性|方法] location对象属性图示: location 对象属性: loca ...
- Javascript进阶篇——浏览器对象—History对象
History 对象history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能.窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都有自己的hi ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- ＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
- 4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
- 5、JavaScript进阶篇②——函数、事件、内置对象
一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; a ...
- Javascript进阶篇——( JavaScript内置对象---上-Date,string,charAt,indexOf,split,substring,substr)笔记整理
什么是对象JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法.对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等:对象的方法:能够在 ...
随机推荐
- SearchFlight_Joker
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 《第一行代码》学习笔记9－活动Activity（7）
1.发现Android中的活动是可以层叠的,每启动一个新的活动,就会覆盖在原活动之上, 然后点击Back键会销毁最上面的活动,下面的一个活动就会重新显示出来. 2.Android是使用任务来管理活动的 ...
- SQL Server 2005中的分区表（三）：将普通表转换成分区表
在设计数据库时,经常没有考虑到表分区的问题,往往在数据表承重的负担越来越重时,才会考虑到分区方式,这时,就涉及到如何将普通表转换成分区表的问题了. 那么,如何将一个普通表转换成一个分区表 呢?说到底, ...
- FineUI上传文件应用(三)
一.文件上传控件 <x:FileUpload runat="server" ID="file" EmptyText="请选择文件" L ...
- Solr中schema.xml的解释
接Solr-4.10.2与Tomcat整合.schema.xml位于D:\solr\data\solr\collection1\conf\中.1.fieldType节点 name: FieldT ...
- javascript的全局变量
javascipt是一门面向对象的编程语言.由于存在一些全局属性及全局函数,因此可以认为存在一个全局变量,这些全局属性及全局函数均是其属性或函数. 在js核心中,并没有定义一个具体的全局变量,因此,j ...
- windows安装composer方法和使用方法
最近在学习yii2的框架的相关知识,对于yii2的许多新特性,最好还是去查看官网文档最好,如果有中文翻译的网站就更好了. 学习yii2的第一个门槛就是得安装composer这个依赖管理工具(但目前我认 ...
- gridview动态生成列
// 有连接的列 if (!String.IsNullOrWhiteSpace(filedModel.C_SqlDetail)) { HyperLinkField hyperColumn = new ...
- PHP（w3s） 笔记
<!--php注释-->// 这是单行注释# 这也是单行注释/*这是多行注释块它横跨了多行*/
- 配色问题lingo实现
大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang !调配颜色 要依次调配红.兰.白.黑.黄五种颜色 红 兰 白 黑 黄 红 0 6 1 ...