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 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法.对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等:对象的方法:能够在 ...
随机推荐
- Asus 安装 windows 7
尊敬的华硕用户您好, 您是不是要让S400从usb和光驱启动呢.可以按如下步骤操作,1.开机的时候长按F2键进入BIOS界面,通过方向键进入[Boot]菜单,通过方向键选择[Lunch CSM]选项, ...
- Eclipse汉化后怎么改回英文版 （中文 改 英文）
Eclipse汉化后怎么改回英文版(可切换中英文) 很多朋友将MyEclipse汉化后还想改回英文的,其实只要修改MyEclipse的配置文件就可以了,这里我以MyEclipse7.0为例演示一下如何 ...
- Windows命令行(DOS命令)教程-3（转载）http://arch.pconline.com.cn//pcedu/rookie/basic/10111/15325_2.html
五.常用命令 DOS命令总共大约有一百个(包括文本编辑.查杀病毒.配置文件.批处理等),我们这里详细介绍二十个常用的DOS命令. 先介绍一下通配符的概念. 通配符*和? *表示一个字符串 ?只代表一个 ...
- iOS_SN_BlueTooth （二）iOS 连接外设的代码实现
原文:http://www.cocoachina.com/ios/20150917/13456.html?utm_source=tuicool&utm_medium=referral 上一篇文 ...
- OD学习笔记10：一个VB程序的加密和解密思路
前边,我们的例子中既有VC++开发的程序,也有Delphi开发的程序,今天我们给大家分析一个VB程序的加密和解密思路. Virtual BASIC是由早期DOS时代的BASIC语言发展而来的可视化编程 ...
- C语言中的sizeof和strlen
1.sizeof是算符,strlen是函数: 2.sizeof可以用类型做参数,strlen只能用char*做参数,且必须是以''\0''结尾的: 3.大部分编译程序,在编译的时候就把sizeof计算 ...
- (转) How to install eclipse in ubuntu 12.04
源地址:http://www.krizna.com/ubuntu/install-eclipse-in-ubuntu-12-04/ Eclipse installation in ubuntu 12. ...
- [Mugeda HTML5技术教程之17] 理解Mugeda访问统计结果
1. 功能简介 Mugeda提供动画统计功能,使得动画制作者可以直观的了解动画的浏览情况,包括浏览量,参与度,以及观看者的分布情况. 目前统计功能主要展示动画内容和广告工程的统计数据.在动画被发布或导 ...
- LeetCode_Subsets II
Given a collection of integers that might contain duplicates, S, return all possible subsets. Note: ...
- hex格式介绍及转bin格式的源程序
Intel HEX文件是记录文本行的ASCII文本文件,在Intel HEX文件中,每一行是一个HEX记录,由十六进制数组成的机器码或者数据常量.Intel HEX文件经常被用于将程序或数据传输存储到 ...