当前位置: 首页 > 工具软件 > jQuery Timers > 使用案例 >

jQuery 插件--jQuery.timers

严欣怡
2023-12-01

jQuery Timers 是一个用来封装 setTimeout 和 setInterval 方法的的插件库:
插件下载地址:http://download.csdn.net/

- 提供了三个方法:

1.everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])
2.oneTime(时间间隔, [计时器名称], 呼叫的函式)
3.stopTime ([计时器名称], [函式名称])

- 使用步骤:

  • everyTime
//每1秒执行函式test()
function test(){
   //do something...
}
$('body').everyTime('1s',test)

//每一秒执行一次
$('body').everyTime('1s',function(){
  //do something...
});

//每1秒执行,并命名计时器名称为A
$('body').everyTime('1s','A',function(){
  //do something...
});

//每20秒执行,最多5次
$('body').everyTime('2das',function(){
  //do something...
},5);

//每20秒执行,无限次,并命名计时器名称为C 
//若时间间隔抵到,但函式程序仍未完成则需等待执行函式完成后再继续计时
$('body').everyTime('2das','C',function(){
    //执行一个会超过20秒以上的程式
},0,true);
  • oneTime
//倒数10秒后执行
$('body').oneTime('1das','D',function(){
  //do something...
});

//倒数100秒后执行,并命名计时器名称为D
$('body').oneTime('1hs','D',function(){
  //do something...
});
  • stopTime
//停止$('body')上所有呼叫test()的计时器
$('body').stopTime (test);

//停止$('body')上所有的计时器
$('body').stopTime ();

//停止$('body')上名称为A的计时器
$('body').stopTime (A);
  • 自定义时间
打开源代码找到:
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 charset=utf-8" />
<title>JQueryTimers</title>
</head>
<body>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.timers-1.2.js" type="text/javascript"></script>
<script>
/**
 * 计时器
 * @param  {string} act         start||stop
 * @param  {string} timerBoxObj 计时器容器
 * @return {null}
 */

function timer(act, timerBoxObj) {
  var obj = timerBoxObj,
      timeIndex = 0;

  function setTime() {
    var hour = parseInt(timeIndex / 3600); // 计算时
    var minutes = parseInt((timeIndex % 3600) / 60); // 计算分
    var seconds = parseInt(timeIndex % 60); // 计算秒
    hour = hour < 10 ? "0" + hour : hour;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    obj.html(minutes + ":" + seconds);
    timeIndex++;
  }

  if (act == 'start') {
      setTime();
    obj.everyTime('1s', function() {
      setTime();
    });
  } else if (act == 'stop') {
    obj.stopTime();
  }
};

 </script>
     <div>0:00</div>
</body>
</html>
 类似资料: