基于JQuery.timer插件实现一个计时器


Posted in Javascript onApril 25, 2010

先去官网下载jQuery Timers插件 ,然后引用到html中。这里是1.2 version

<script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script>

然后是HTML,我们可以放一个hidden 的server control存值用,当然这个随你了。

<asp:HiddenField ID="hicurrenttime" runat="server" /> 
<h1> 
jQuery Timers Test</h1> 
<input type="button" id="btnmaster" value="StartTimer" /> 
<h2> 
Demos</h2> 
<div class="demos"> 
<span id="durationtimerspan"></span> 
<br /> 
<input id="txtresult" type="text" /> 
</div>

加上JS:
[/code]
$(document).ready(function() {
var countnum = <%=hicurrenttime.Value %>;
$('#btnmaster').toggle(
function() {
$(this).val('StopTimer');
$('#durationtimerspan').everyTime(1000, 'testtimer', function(i) {
countnum = countnum + 1;
$(this).html('Duration: ' + countnum);
$('#<%=hicurrenttime.ClientID %>').val(countnum);
});
},
function() {
$(this).val('StartTimer');
$('#durationtimerspan').stopTime('testtimer');
$('#txtresult').val(countnum);
});
});
[html]
上面的代码关键的地方是我们用toggle函数,去实现点击Button开关计时器。这个插件有三个方法:
everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])
每次都执行
oneTime(interval : Integer | String, [label = interval : String], fn : Function)
执行一次
stopTime([label : Integer | String], [fn : Function])
停止
最后我们效果如下图: 
基于JQuery.timer插件实现一个计时器 
类似的用法:

//每1秒执行函式test() 
function test(){ 
//do something... 
} 
$('body').everyTime('1s',test); 
//每1秒执行 
$('body').everyTime('1s',function(){ 
//do something... 
}); 
//每1秒执行,并命名计时器名称为A 
$('body').everyTime('1s','A',function(){ 
//do something... 
}); 
//每20秒执行,最多5次,并命名计时器名称为B 
$('body').everyTime('2das','B',function(){ 
//do something... 
},5); 
//每20秒执行,无限次,并命名计时器名称为C 
//若时间间隔抵到,但函式程序仍未完成则需等待执行函式完成后再继续计时 
$('body').everyTime('2das','C',function(){ 
//执行一个会超过20秒以上的程式 
},0,true); 
/*********************************************************** 
* oneTime(时间间隔, [计时器名称], 呼叫的函式) 
***********************************************************/ 
//倒数10秒后执行 
$('body').oneTime('1das',function(){ 
//do something... 
}); 
//倒数100秒后执行,并命名计时器名称为D 
$('body').oneTime('1hs','D',function(){ 
//do something... 
}); 
/************************************************************ 
* stopTime ([计时器名称], [函式名称]) 
************************************************************/ 
//停止所有的在$('body')上计时器 
$('body').stopTime (); 
//停止$('body')上名称为A的计时器 
$('body').stopTime ('A'); 
//停止$('body')上所有呼叫test()的计时器 
$('body').stopTime (test);

希望这篇POST对您有帮助。Author: Petter Liu
Javascript 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 #Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 #Javascript
Javascript中的相等与不等运算
Apr 25 #Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 #Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 #Javascript
javascript之学会吝啬 精简代码
Apr 25 #Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 #Javascript
You might like
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
用Python给文本创立向量空间模型的教程
2015/04/23 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
python爬虫工具例举说明
2020/11/30 Python
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
高校自主招生自荐信
2013/12/09 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
建筑工地质量标语
2014/06/12 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
优秀团员自我评价
2015/03/10 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server