插件 jQuery.timer 中文 API 文档

🌙
手机阅读
本文目录结构

插件 jQuery.timer 中文 API 文档 https://github.com/walmik/timer.jquery

jQuery Timer:启动 / 停止 / 恢复 / 删除任何 HTML 元素中的漂亮计时器。

jQuery Timer 插件

轻量级,经过良好测试的建立状态 jQuery pretty timer 插件 在任何 HTML 元素中启动,暂停,恢复和删除计时器。 在特定时间后或定期收到通知。 在计时器运行时单击并编辑时间! 在同一页面上启用多个计时器。 演示和说明 | 下载

入门

使用此 URL 直接从 CDNjs 将脚本加载到脚本标记中(在加载 jQuery 之后)

https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js

如果你正在使用凉亭,

bower install timer.jquery

或者,您可以下载 jQuery 计时器插件并相对于您的 HTML 文件托管它。一旦你有了获得 jquery 和计时器插件的首选方法,请在你的网页中:

<script src="path/to/jquery.js"></script>
<script src="path/to/timer.jquery.js"></script>
<script>
(function($) {

  //start a timer
  $("#div-id").timer();

}());
</script>

用法

要使用选项启动计时器:

$("#div-id").timer(options);

计时器选项:

$("#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
	editable:	{Bool}		// If click and edit time is enabled
	hidden;		{Bool}		// 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');

定时活动

启动计时器并在一定时间后执行功能。您可以使用它来模拟定时事件。

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

定时器状态

您可以通过查询 state 其数据对象上的属性来获取计时器的当前状态

$('#div-id').data('state'); 	// running | paused | stopped | removed

持续时间语法

使用 duration 和 callback 参数初始化计时器时,计时器插件会在设置的持续时间内执行回调函数。指定持续时间的语法是详细的。h 用了几个小时。m 几分钟和 s 几秒钟。这里有些例子:

' 3h15m ' 		// 3小时15分钟
' 15米' 		// 15分钟
' 30年代' 		// 30秒
' 2分30秒' 		// 2分钟30秒
' 2h15m30s ' 	// 2小时15分30秒

格式语法

默认情况下,计时器显示最大的整体单位。例子:

  • seconds: 50 将显示为 50 sec
  • seconds: 63 将显示为 1:03 min
  • seconds: 3663 将显示为 1:01:03

如果要自定义计时器显示时间的格式,请使用该 format 选项。计时器可以理解的格式是:

格式 描述
%h 非零填充小时数 %h hours 给 3 hours
%m 非零填充分钟,除非分钟数大于 60 %h:%m minutes 给予 0:6 minutes 或 1:06 minutes
%g 非零填充总分钟与小时数无关 %G minutes 给予 75 minutes 或 6 minutes
%s 非零填充秒数,除非秒数大于 60 %h:%m:%s 给予 0:0:6 或 0:1:06 或 1:01:06
%t 非零填充总秒数与分钟和小时无关 %t 给出 3660'9'
%H 零填充小时 %H hours 给 03 hours
%M 零填充分钟 %H:%M minutes 给 00:06 minutes
%G 零填充总分钟与小时无关 %G minutes 给 75 minutes
%S 零填充秒 %H:%M:%S 给 00:00:06
%T 零填充总秒数与分钟和小时无关 %T 给 3660

倒数

您也可以使用 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!');
    }
});

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了