基于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

(0)

相关推荐

  • jquery 显示*天*时*分*秒实现时间计时器

    1.用jquery实现时间计时器,从之前的某个时间段到现在距离多少天多少时多少分多少秒? html代码: 复制代码 代码如下: <div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w"> <span id="time_d" class="time"> </span >天 <spa

  • jquery实现手机发送验证码的倒计时代码

    复制代码 代码如下: var wait=60;//时间 function time(o,p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { o.removeAttr("disabled"); o.val("点击发送验证码");//改变按钮中value的值 p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); wait = 60; } else { o.

  • jQuery实现倒计时跳转的例子

    实现代码: 复制代码 代码如下: <html>   <head>   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    <title>跳转页面</title>      <script src="jquery.js"></script>    <script la

  • jQuery timers计时器简单应用说明

    因为方便嘛,Jquery已封装JS的setTimeout 和 setInterval 方法,下面看下应用例子: 复制代码 代码如下: /** * jQuery.timers - Timer abstractions for jQuery * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com) * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/). * D

  • jQuery实现简单的计时器功能实例分析

    本文实例讲述了jQuery实现简单的计时器功能.分享给大家供大家参考,具体如下: 在写项目的过程中遇到要前端60秒发送验证码的业务需求,于是用到计时器的功能: setInterval(function xxx(){ //业务逻辑 },隔多少时间执行一次) 60秒计时思路: 1.设置秒数:60s 2.设置内容:实时改变,秒数+内容 3.结束后:去掉按钮的disable,内容恢复原来样子 //计时器60秒 function timeInterval(){ $("#code_send_btn"

  • jquery简单倒计时实现方法

    本文实例讲述了jquery简单倒计时实现方法.分享给大家供大家参考,具体如下: var intDiff = parseInt(60); //倒计时总秒数量 function timer(intDiff) { window.setInterval(function () { var day = 0, hour = 0, minute = 0, second = 0; //时间默认值 if (intDiff > 0) { day = Math.floor(intDiff / (60 * 60 * 2

  • 利用jQuery实现漂亮的圆形进度条倒计时插件

    jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件.该倒计时插件可以显示倒计时的秒.分钟.小时和天数.它采用圆形进度条来作为倒计时的动画,非常的时尚大方. 在线预览    源码下载 使用方法 该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库.使用是要将它们引入. <script type="text/javascript" src="js/jquery.min.js"><

  • JQuery实现倒计时按钮具体方法

    复制代码 代码如下: <head>    <title>test count down button</title>    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>    <script type="text/javascri

  • jQuery倒计时代码(超简单)

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span class="timespan"></span> </body> <script

  • 基于jquery插件编写countdown计时器

    废话不多说,直接上代码: 先展示一下插件调用方式:  1. 需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jquery countdown倒计时插

  • jquery实现一个全局计时器(商城可用)

    本文实例为大家分享了商城一类都可以使用的jquery全局计时器,供大家参考,具体内容如下 实现思路 遍历所有待计时元素,添加一个setInterval计时函数,每隔X秒执行更新计时操作(中间可能还有格式化时间操作). 代码实现 ps:JQ元素通过arr[i]取值时会转变成DOM元素,dom元素和JQ之间转换用 $(arr[i]) 获取所有待计时元素 var arrList =$(".stime"); setInterval(function(){ //遍历数组 for(var i =

  • sliderToggle在写jquery的计时器setTimeouter中不生效

    今天在写jquery时发现sliderToggle在setTimeouter中不生效,还报错说是发生了意想不到的错误.看了很久也没明白后来猛然发现使用show();hide():就可以. bootstrap的一些学习笔记. 首先应该了解其框架构成,什么对应什么,其次是名称要熟练记忆,一般而言都是所见即所得,名字很有规律.最后是多练,在练习中逐渐掌握这些规则.

随机推荐