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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
vue.js表格分页示例
Oct 18 Javascript
微信小程序 form组件详解
Oct 25 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
详解vue中组件参数
Jul 09 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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
YB217、YB235、YB400浅听
2021/03/02 无线电
用PHP读注册表
2006/10/09 PHP
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
ADODB的数据库封包程序库
2006/12/31 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php实现的SESSION类
2014/12/02 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python解包用法详解
2021/02/17 Python
美国时尚在线:Showpo
2017/09/08 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
保护环境建议书400字
2014/05/13 职场文书
标准版离职证明书
2014/09/12 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
2014国庆节标语口号
2014/09/19 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
委托收款证明
2015/06/23 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
MySql数据库 查询时间序列间隔
2022/05/11 MySQL