阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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!');
          }
      });
      
      目录
      目录