JQuery定时器(jQuery Timers)

所属分类:输入-日期和时间

 174295  327  查看评论 (1)
分享到微信朋友圈
X
JQuery定时器(jQuery Timers) ie兼容6

使用步骤

JQuery Timers应用知识

提供了三个函式

1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])

2. oneTime(时间间隔, [计时器名称], 呼叫的函式)

3. stopTime ([计时器名称], [函式名称])

/*************************************************************

*   everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])

*************************************************************/

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

自定义时间单位

打开源代码

找到

powers: {

   // Yeah this is major overkill...

   'ms': 1,

   'cs': 10,

   'ds': 100,

   's': 1000,

   'das': 10000,

   'hs': 100000,

   'ks': 1000000

  }


示例:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery定时器</title>

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

<script>

        function check() {
            $("#Button1").attr("disabled", true);
            $("#Button1").val("正在提交,请稍等3秒.....");
            $('body').oneTime('3s', function() {
                $("#Button1").attr("disabled", false);
                $("#Button1").val("测试提交");
				alert("3秒后提交结果");
            });
        }

    </script>

</head>

<body>

<input id="Button1" onclick="check();return false;" value="测试提交" type="submit" name="Button1"> 

</body>
</html>

相关插件-日期和时间

只选择小时、分的时间插件jquery-timepicker.js

HunterTimePicker 时间选择组件,可以选择小时和分钟,小时为24小时制,分钟间隔为5分钟。
  日期和时间
 80418  371

Jquery时间,日期控件

Jquery时间,日期控件,高端大气,可以设置小时分钟。
  日期和时间
 92311  489

jQuery时间轴(原创)

时间轴,可左右点击切换、点击年,切换下面对应的内容
  日期和时间
 34322  375

jQuery扁平化多色时间日历插件ECalendar

基于jQuery开发的CSS3时间日历插件,高效好用,日期时间选择一气呵成。
  日期和时间
 52887  493

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    SiriBen 0
    2017/1/11 11:01:10

    下载下来学习下,如果点击后,3秒的倒计时能动态显示秒数就完美了

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复