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 相关文章推荐
关于JS管理作用域的问题
Apr 10 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
鼠标图片振动代码
2006/07/06 Javascript
Javascript this指针
2009/07/30 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
Python+django实现文件下载
2016/01/17 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
意向协议书范本
2014/04/23 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android