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实现图片层叠轮播切换效果
Feb 02 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
jquery中文乱码的多种解决方法
2013/06/21 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
python静态方法实例
2015/01/14 Python
python daemon守护进程实现
2016/08/27 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
《最大的“书”》教学反思
2014/02/14 职场文书
客户接待方案
2014/02/26 职场文书
推荐信模板
2014/05/09 职场文书
IT工程师岗位职责
2014/07/04 职场文书
满月酒邀请函
2015/01/30 职场文书
看雷锋电影观后感
2015/06/10 职场文书
2016年党建工作简报
2015/11/26 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
导游词之广州陈家祠
2019/10/21 职场文书