JQuery定时器(jQuery Timers)

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

 173512  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>

相关插件-日期和时间

基于bootstrap按年、季度、年月、年月日的日历插件(原创)

基于bootstrap按年、季度、年月、年月日的日历插件,作为bootstrapdatetimepicker的扩展
  日期和时间
 26724  186

带节假日设置的日历

带节假日设置的日历
  日期和时间
 105509  442

一个简单的jQuery日历插件Calendar.js

Calendar.js一个简单的日历插件;体积很小,使用方便,便于我们使用到不同场景,只需修改css就可适用moblie、pc
  日期和时间
 83114  311

圆形时间进度条-倒计时

html5 + css3 打造的圆形时间倒计时进度条
  日期和时间
 54306  348

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

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

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

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