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 自动填写表单的实现方法
Apr 09 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
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
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python中join和split用法实例
2015/04/14 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python 编码规范整理
2018/05/05 Python
python实现电子产品商店
2019/02/26 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
大学军训感想
2014/02/12 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
银行进社区活动总结
2014/07/07 职场文书
家属慰问信
2015/02/14 职场文书
关于公司年会的开幕词
2016/03/04 职场文书