timer.jquery是什么
什么是timer.jquery？
Start/Stop/Resume/Remove a timer inside any HTML element.
（在任何HTML元素内启动/停止/继续/删除计时器。）
Getting started
使用此URL直接从CDNjs将插件加载到脚本标签中（加载jQuery之后）。
https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js
或
[https://www.bootcdn.cn/timer.jquery/](https://www.bootcdn.cn/timer.jquery/)
If you are using bower,
bower install timer.jquery
或者，您可以 下载jQuery计时器插件，并将其托管在HTML文件的相对位置。 在您拥有首选方法来获取jquery和timer插件之后，请在您的网页中：
<script src="path/to/jquery.js"></script>
<script src="path/to/timer.jquery.js"></script>
<script>
(function($) {
//start a timer
$("#div-id").timer();
}());
</script>
Usage
要使用选项启动计时器：
$("#div-id").timer(options);
Options for 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}, //(如果设置了持续时间，`callback`将被重复调用) If duration is set, `callback` will be called repeatedly
format: {String}, // （格式化以显示时间）Format to show time in
editable: {Bool} // （如果启用了点击和编辑时间）If click and edit time is enabled
hidden; {Bool} //(如果为true，则计时器不会显示在所选项目中。) If true, the timer is not displayed in the selected item.
});
初始化计时器上可用的方法：
//(暂停现有计时器)pause an existing timer
$("#div-id").timer('pause');
//(恢复暂停的计时器)resume a paused timer
$("#div-id").timer('resume');
//(删除现有计时器)remove an existing timer
$("#div-id").timer('remove'); //leaves the display intact
//(获得经过的时间（以秒为单位))get elapsed time in seconds
$("#div-id").data('seconds');
Timed Events
在一定时间后启动计时器并执行功能。 您可以使用它来模拟定时事件。
//start a timer & execute a function in 5 minutes & 30 seconds
$('#div-id').timer({
duration: '5m30s',
callback: function() {
alert('Time up!');
}
});
启动计时器，并在一定时间内重复执行功能。
//start a timer & execute a function every 2 minutes
$('#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
});
启动计时器，并在一定时间内重复执行功能，然后重置计时器。
//start a timer & execute a function every 2 minutes
$('#div-id').timer({
duration: '2m',
callback: function() {
$('#div-id').timer('reset');
},
repeat: true //repeatedly calls the callback you specify
});
Timer state
您可以通过查询其数据对象的state属性来获取计时器的当前状态
$('#div-id').data('state'); // running | paused | stopped | removed
Duration Syntax
当使用duration和callback参数初始化计时器时，timer插件将在设置的持续时间执行回调函数。
指定持续时间的语法是冗长的。 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
Format Syntax
默认情况下，计时器显示最大的整体单位。 例子：
- seconds: 50 will show as 50 sec
- seconds: 63 will show as 1:03 min
- seconds: 3663 will show as 1:01:03
如果要自定义计时器显示时间的格式，请使用格式选项。
计时器了解的可用格式为：
| Format | Description | Example |
|---|---|---|
| %h | Non-zero padded Hours |
%h hours gives 3 hours
|
| %m | Non-zero padded Minutes unless number of minutes is greater than 60 |
%h:%m minutes gives 0:6 minutes or 1:06 minutes
|
| %g | Non-zero padded Total Minutes Irrelative to hours |
%Gminutes gives 75 minutes or 6 minutes
|
| %s | Non-zero padded Seconds unless number of seconds is greater than 60 |
%h:%m:%s gives 0:0:6 or 0:1:06 or 1:01:06
|
| %t | Non-zero padded Total Seconds Irrelative to minutes and hours |
%tgives 3660 or '9'
|
| %H | Zero padded Hours |
%H hours gives 03 hours
|
| %M | Zero padded Minutes |
%H:%M minutes gives 00:06 minutes
|
| %G | Zero padded Total Minutes Irrelative to hours |
%G minutes gives 75 minutes
|
| %S | Zero padded Seconds |
%H:%M:%S gives 00:00:06
|
| %T | Zero padded Total Seconds Irrelative to minutes and hours |
%T gives 3660
|
Countdown
您也可以使用jQuery计时器插件进行倒计时。
$('#timerDiv').timer({
countdown: true,
duration: '3m40s', // This will start the countdown from 3 mins 40 seconds
callback: function() { // This will execute after the duration has elapsed
console.log('Time up!');
}
});
网友评论