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

基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下。

先去官网下载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]) 
停止 
最后我们效果如下图: 
 
类似的用法:

复制代码代码如下:

//每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

时间: 2024-09-29 10:40:59

基于JQuery.timer插件实现一个计时器的相关文章

基于jQuery幻灯片插件Slippry

分享一款基于jQuery幻灯片插件Slippry是一款基于Slippry.js插件实现的图片切换特效代码.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-content"> <ul id="thumbnails"> <li> <a href="#slide1"> <img src="img/image-1.jpg"

基于jQuery日期插件jalendar2

分享一款基于jQuery日期插件jalendar2.这是一款基于jalendar插件实现的日期时间选择代码.效果图如下: 在线预览   源码下载 html代码: <div id="yourId" class="jalendar"> <div class="added-event" data-date="19-11-2015" data-title="WWDC 13 on San Francisco,

基于jQuery幻灯片插件SkitterSlideshow

分享一款基于jQuery幻灯片插件SkitterSlideshow是一款支持38种不同的幻灯片过渡动画效果,以及两种不同类型的导航按钮,并且它提供了大量的配置参数用于控制幻灯片的显示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div id="page"> <div id="content"> <div class=

编写基于jQuery的插件的方法

注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 1 $.extend({ 2 add:function(a,b){return a+b;}, 3 minus:function(a,b){return a-b;} 4 }); 5 6 var i= $.add(100,200); 7 var j= $.minus(100,200); 8 alert(i

10个web前端基于jQuery动画插件及源码

1.超赞的页面加载进度自动指示和 Ajax 导航效果 在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等. 在线演示 源码下载 2.ProgressBar.js – 漂亮的响应式 SVG 进度条 ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 Progr

JQuery 定时器 (Jquery Timer 插件)

jQuery Timers插件地址: http://plugins.jquery.com/project/timers JQuery Timers应用知识提供了三个函式1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])2. oneTime(时间间隔, [计时器名称], 呼叫的函式)3. stopTime ([计时器名称], [函式名称])/***************************************************

一款基于jQuery日历插件的开发过程

这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的  也就是说  日历的样式是定制的: 废话不多说,如有错误,跪求各位大神指正,感谢!! ;(function($){ //创建一个日历插件    $.fn.Calendar = function(o){ //为这个日历插件创建一个构造函数        var Calendar = function(o,obj){            this.fnin(o,obj);        };//为日历

基于jquery 的插件,让IE支持placeholder属性

今天有幸被召回母校给即将毕业的学弟学妹们讲我这两年的工作史,看了下母校没啥特别的变化,就是寝室都安了空调,学妹们都非常漂亮而已..好了不扯蛋了,说下今天的主题吧.这些天我在深度定制语法高亮功能的同时发现了博客园提供的一些有意思的函数,甚至有几个博客园都没用到,我也不知道怎么才能触发那些功能..打开这个js就可以看到很多好用的东西了,虽然写的不怎么样,但是至少有这些功能. ps: 推荐安装一个代码格式化的插件,否则一坨看着蛋疼.比如第一个就是 log,方便调试. http://www.qidian

基于jquery的插件结构

(function ($) { /** * 创建dom * @param $this * @returns {boolean} */ function createHtml($this) { _init($this); } /** * 初始化 * @private */ function _init($this) { } //public method var methods = { init: function (initOptions) { options = $.extend({}, $.