javascript计时器事件使用详解


Posted in Javascript onJanuary 07, 2014

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

setTimeout()
未来的某时执行代码

clearTimeout()
取消setTimeout()
setTimeout()
语法

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示:1000 毫秒等于一秒。

当下面这个例子中的按钮被点击时,一个提示框会在5秒中后弹出。

<html>
<head>
<script type="text/javascript">
function timedMsg()
 {
 var t=setTimeout("alert('5 seconds!')",5000)
 }
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>

实例 - 无穷循环

要创建一个运行于无穷循环中的计时器,我们需要编写一个函数来调用其自身。在下面的例子中,当按钮被点击后,输入域便从 0 开始计数。

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>

clearTimeout()

语法

clearTimeout(setTimeout_variable)
 

实例

下面的例子和上面的无穷循环的例子相似。唯一的不同是,现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器:

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }
function stopCount()
 {
 clearTimeout(t)
 }
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>

另外两个重要的方法:

setInterval()
setInterval() - executes a function, over and over again, at specified time intervals

作用是:循环执行一个方法,在规定的间隔时间内

语法:

window.setInterval("javascript function",milliseconds);

说明:第一个参数必须是一个函数,第二个参数是执行函数的间隔时间.

实例:

<html>
<script type="text/javascript">
setInterval(function() {alert("hello")},500);
</script>
</html>

说明:上面例子,执行效果是说每隔500ms就alert("hello");

再来一个时钟:

<html>
<body>
<p id="demo" ></p>
<script type="text/javascript">
setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
</script>
</body>
</html>    

如何停止,setInterval()方法??

window.clearInterval()

语法:
window.clearInterval(intervalVariable)
The window.clearInterval() method can be written without the window prefix.
To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
myVar=setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.

实例:

<html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
function stop(){
   <html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
function stop(){
        clearInterval(temp);
}
</script>
</body>
</html>
}
</script>
</body>
</html>
Javascript 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
js友好的时间返回函数
Aug 24 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
详解javascript中的Error对象
Apr 25 Javascript
javascript创建和存储cookie示例
Jan 07 #Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 #Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 #Javascript
js showModalDialog参数的使用详解
Jan 07 #Javascript
js showModalDialog弹出窗口实例详解
Jan 07 #Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 #Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 #Javascript
You might like
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python列表解析配合if else的方法
2018/06/23 Python
python使用Matplotlib画饼图
2018/09/25 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
日期和时间问题
2015/01/04 面试题
给男朋友的道歉信
2014/01/12 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
项目合作意向书
2015/05/08 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
上甘岭观后感
2015/06/10 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Python深度学习之Pytorch初步使用
2021/05/20 Python
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL