timer.jquery是一款简单实用的jQuery计时器插件。该插件可以任何HTML元素中插入计时器,并对计时器进行开始,暂停,恢复和移除操作。该计时器插件的特点还有:
- 轻量级插件。
- 可对计时器进行开始,暂停,恢复和移除操作。
- 完成计时后可执行相应的回调函数。
- 在计时器运行时可以点击和编辑。
- 同一个页面中可以有多个计时器实例。
安装
可以通过bower来安装该定时器插件。
bower install timer.jquery
使用方法
使用时需要引入jquery和timer.jquery.js文件。
<script src="path/to/jquery.js" type="text/javascript"></script> <script src="path/to/timer.jquery.js"></script>
HTML结构
可以使用任何元素作为计时器的容器:
<div id="example"></div>
初始化插件
在页面DOM元素加载完毕之后,可以通过timer()
方法来初始化该定时器插件。
//start a timer $("#div-id").timer();
配置参数
该定时器插件可用的配置参数如下:
$("#div-id").timer({ seconds: {Int}, // The number of seconds to start the timer from duration: {String}, // The time to countdown from. `seconds` and `duration` are mutually exclusive callback: {Function}, // If duration is set, this function is called after `duration` has elapsed repeat: {Bool}, // If duration is set, `callback` will be called repeatedly format: {String}, // Format to show time in countdown: {Bool} });
-
seconds
:定时器开始的秒数。 -
duration
:定时器的定时时间。 -
callback
:定时结束后的回调函数。 -
repeat
:如果设置了duration
参数,回调函数将被重复调用。 -
format
:显示的时间格式。 -
countdown
:是否作为倒计时器来使用。
方法
暂停定时器:
$("#div-id").timer('pause');
恢复被暂停的定时器:
$("#div-id").timer('resume');
移除指定的定时器:
$("#div-id").timer('remove');
获取已经过的时间:
$("#div-id").data('seconds');
事件
开始一个定时器,并在指定的时间之后执行回调函数:
// 5分30秒之后执行回调函数 $('#div-id').timer({ duration: '5m30s', callback: function() { alert('计时时间到!'); } });
在指定的时间间隔内重复执行回调函数:
// 每隔2分钟执行一次回调函数 $('#div-id').timer({ duration: '2m', callback: function() { console.log('Why, Hello there'); //you could have a ajax call here instead }, repeat: true //repeatedly calls the callback you specify });
在指定的时间之后重置定时器,重新开始计时:
// 2分钟之后重置定时器,并重新开始计时 $('#div-id').timer({ duration: '2m', callback: function() { $('#div-id').timer('reset'); }, repeat: true //repeatedly calls the callback you specify });
计时器状态
你可以通过计时器data()
对象的state
属性来获取计时器的当前状态。
$('#div-id').data('state'); // running | paused | stopped
计时时间语法
计时时间h
代表小时,m
代表分钟,s
代表秒。
'3h15m' // 3 hours, 15 minutes '15m' // 15 minutes '30s' // 30 seconds '2m30s' // 2 minutes 30 seconds '2h15m30s' // 2 hours 15 minutes and 30 seconds
默认情况下,计时器会以最大的单位作为单位来显示,例如:
seconds: 50 将显示为 50 sec seconds: 63 将显示为 1:03 min seconds: 3663 将显示为 1:01:03
如果你项自定义显示的时间格式,可以使用下表的格式:
格式 | 描述 | 示例 |
%h | 不带前缀0的小时格式 | %h hours gives 3 hours |
%m | 除非数值大于60,否则显示不带前缀0的分钟 | %h:%m minutes gives 0:6 minutes or 1:06 minutes |
%g | 以分钟来表示时间 | %g minutes gives 75 minutes or 6 minutes |
%s | 除非数值大于60,否则显示不带前缀0的秒数 | %h:%m:%s gives 0:0:6 or 0:1:06 or 1:01:06 |
%t | 以秒数来表示时间 | %t gives 3660 or '9 |
%H | 带前缀0的小时格式 | %H hours gives 03 hours |
%M | 带前缀0的分钟 | %H:%M minutes gives 00:06 minutes |
%G | 前导带0的以分钟来表示时间 | %G minutes gives 75 minutes |
%S | 带前缀0的秒数 | %H:%M:%S gives 00:00:06 |
%T | 前导带0的以秒数来表示时间 | %T gives 3660 |
timer.jquery计时器插件的github地址为:https://github.com/walmik/timer.jquery。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!