downtime.js。倒计时JQ插件年月日

其他 2018-11-29 00:02:02 阅读次数: 0

downtime.js

/*!
  * jQuery downtime plugin
  * version 0.2
  * Author: Rob Griffiths <[email protected]> http://github.com/bytespider/downtime
  * Licence: MIT license
  */
   
  /*
  * Copyright (c) 2012 Rob Griffiths
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
  * in the Software without restriction, including without limitation the rights
  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  * copies of the Software, and to permit persons to whom the Software is
  * furnished to do so, subject to the following conditions:
  *
  * The above copyright notice and this permission notice shall be included in
  * all copies or substantial portions of the Software.
  *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
   
  !function($) {
  $.fn.downtime = function (method) {
   
  var count_types = {
  'countup': {
  init: function (item) {
  item.data('time', 0);
  },
  update: function (item) {
  var time = parseInt(item.data('time'), 10);
  item.data('time', ++time);
   
  return time;
  },
  finished: function (item) {
  return parseInt(item.data('time'), 10) == parseInt(item.data('options').time, 10);
  }
  },
  'countdown': {
  init: function (item) {
  var time = parseInt(item.data('options').time, 10);
  item.data('time', time);
  },
  update: function (item) {
  var time = parseInt(item.data('time'), 10);
  item.data('time', --time);
   
  return time;
  },
  finished: function (item) {
  return parseInt(item.data('time'), 10) == 0;
  }
  }
  };
   
  var methods = {
  init: function (options) {
  options = $.extend({
  time: null,
  intervalFrequency: 1000 /* 1 second */,
  type: 'countdown' /* countup */,
  autostart: true,
  complete: null,
  hoursFormat: timeFormat,
  minutesFormat: timeFormat,
  secondsFormat: timeFormat,
  }, options);
   
  if (null == options.time) {
  $.error('missing option time passed to jQuery.downtime');
  return this;
  }
   
  if (!/^count(up|down)$/.test(options.type)) {
  $.error('type ' + options.type + ' is not a valid jQuery.downtime count type');
  return this;
  }
   
  this.each(function () {
  var $this = $(this);
   
  $this.data('options', options);
  count_types[options.type].init($this);
   
  var time = $this.data('time');
  var intervalFrequency = parseInt($this.data('options').intervalFrequency, 10);
   
  $this.bind('downtime.update', update).trigger('downtime.update', {
  item: $this,
  hours: hours(time, intervalFrequency),
  minutes: minutes(time, intervalFrequency),
  seconds: seconds(time, intervalFrequency),
  time: time
  });
  });
   
  if (options.autostart) {
  methods.start.call(this);
  }
   
  return this;
  },
  option: function (option, value) {
  var options = $(this).data('options') || {};
   
  if (null != value) {
  // set
  options[option] = value;
  return $(this).data('options', options);
  }
   
  // get
  return option in options ? options[option] : null;
  },
  start: function () {
  return this.each(function () {
  $this = $(this);
   
  if ($this.data('timeout_id')) {
  // already running
  return;
  }
   
  var intervalFrequency = parseInt($this.data('options').intervalFrequency, 10);
  var timeout_id = setInterval(function () {
  var options = $this.data('options');
  var time = count_types[options.type].update($this);
   
  if (count_types[options.type].finished($this)) {
  $this.trigger('downtime.complete', {
  item: $this
  });
   
  if (null != options.complete) {
  options.complete.call($this);
  }
   
  methods.stop.call($this);
  }
   
  $this.trigger('downtime.update', {
  item: $this,
  hours: hours(time, intervalFrequency),
  minutes: minutes(time, intervalFrequency),
  seconds: seconds(time, intervalFrequency),
  time: time
  });
   
  }, intervalFrequency);
  $this.data('timeout_id', timeout_id);
  });
  },
  pause: function () {
  return this.each(function () {
  if ($(this).data('timeout_id')) {
  clearInterval($(this).data('timeout_id'));
  }
  });
  },
  stop: function () {
  return this.each(function () {
  $this = $(this);
   
  $this.data('time', parseInt($this.data('options').time, 10));
  if ($(this).data('timeout_id')) {
  clearInterval($this.data('timeout_id'));
  }
  });
  },
  show: function () {
  return this.each(function () {
  $(this).timer('resume');
  $(this).show.apply(this, [].slice.call(arguments, 0));
  });
  },
  hide: function () {
  return this.each(function () {
  $(this).timer('pause');
  $(this).hide.apply(this, [].slice.call(arguments, 0));
  });
  }
  };
   
  if (methods[method]) {
  return methods[method].apply(this, [].slice.call(arguments, 1));
  } else if (typeof method === 'object' || ! method) {
  return methods.init.apply(this, arguments);
  } else {
  $.error('Method ' + method + ' does not exist on jQuery.downtime');
  };
   
   
  function hours(timestamp, resolution) {
  return Math.floor(timestamp / (resolution/1000) / 3600);
  }
   
  function minutes(timestamp, resolution) {
  return Math.floor((timestamp / (resolution/1000) / 60) % 60);
  }
   
  function seconds(timestamp, resolution) {
  return Math.floor(timestamp / (resolution/1000) % 60);
  }
   
  function update(event, data) {
  $('[data-bind="hours"]', $(this)).text((data.hours + '').replace(/^(\d)$/, '0$1'));
  $('[data-bind="minutes"]', $(this)).text((data.minutes + '').replace(/^(\d)$/, '0$1'));
  $('[data-bind="seconds"]', $(this)).text((data.seconds + '').replace(/^(\d)$/, '0$1'));
  }
   
  function timeFormat(time) {
  return (time + '').replace(/^(\d)$/, '0$1');
  }
  };
 

}(jQuery);

----------------------------------------分隔-------------------------------------------------

用于可定制计时器和定时事件的jQuery插件。

用法

$（'＃my-countdown-timer '）。停机时间（{
    时间： 60，
    intervalFrequency ： 1000，              / *计时器滴答的频率，以毫秒为单位。默认值：1000 * / 
    类型： '倒计时'，                   / *或计数。默认值：倒计时* / 
    自动启动： false，                    / * true立即启动计时器。默认值：true * /
     complete ： function（）{              / *定时器完成时调用的可选函数。* /
        警告（' YAY！全部完成。'）;
    }，
    hoursFormat ： function（time）{       / *格式化小时组件* /
        返回时间+  '小时'的可选功能 ;          / *默认值：返回组件填充2位* /
    }，
    minutesFormat ： function（time）{     / *格式化分钟组件的可选函数* /
        返回时间+  '分钟' ;        / *默认值：返回组件填充2位* /
    }，
    secondsFormat ： function（time）{     / *格式化秒组件* /
        返回时间+  ' s '的可选函数 ;              / *默认值：返回组件填充2位* /
    }
}）;

最简单的用法

<div id="my-countdown-timer">
    <span data-bind="hours"></span> hours
    <span data-bind="minutes"></span> minutes
    <span data-bind="hours"></span> seconds
</div>
<script>
    $('#my-countdown-timer').downtime({time: 2700});
</script>

API文档

选项

时间

计时器运行的时间长度。该数量取决于intervalFrequency，使得分辨率增加或减少。

代码示例：

使用指定的时间选项初始化计时器：

$('.selector').downtime({time: 60});

初始化后获取或设置时间选项：

// getter
var current_time = $('.selector').downtime('option', 'time');

// setter
$('.selector').downtime('option', 'time', 100);

intervalFrequency

计时器更新的频率（以毫秒为单位）。每个刻度将递增或由1计时器的分辨率减小的时间可以通过设定来incresed intervalFrequency高于1000，例如一个intervalFrequency的1只意味着time具有n *毫秒，而一个分辨率intervalFrequency的60000个装置，其time具有的分辨率小时。

默认值：1000

代码示例：

使用指定的时间选项初始化计时器：

$('.selector').downtime({intervalFrequency: 1000});

初始化后获取或设置intervalFrequency选项：

// getter
var interval_ms = $('.selector').downtime('option', 'intervalFrequency');

// setter
$('.selector').downtime('option', 'intervalFrequency', 1000);

类型

如果计时器是倒数计时器或倒数计时器。

默认值：'倒计时'

代码示例：

使用指定的type选项初始化计时器：

$('.selector').downtime({type: 'countup'});

自动启动

如果计时器是倒数计时器或倒数计时器。

默认值：true

代码示例：

使用指定的autostart选项初始化计时器：

$('.selector').downtime({autostart: false});

自动启动

如果计时器是倒数计时器或倒数计时器。

默认值：true

代码示例：

使用指定的autostart选项初始化计时器：

$('.selector').downtime({autostart: false});

hoursFormat

格式化小时组件的功能。

默认： function (time) { return (time + '').replace(/^($\d)$/, '0$1'); }

代码示例：

使用指定的hoursFormat选项初始化计时器：

$('.selector').downtime({hoursFormat: function (time) {
    return time + 'hours'
}});

初始化后获取或设置hoursFormat选项：

// getter
var hours_formater = $('.selector').downtime('option', 'hoursFormat');

// setter
$('.selector').downtime('option', 'hoursFormat', function (time) {
    return time + 'hours'
});

minutesFormat

用于格式化分钟组件的函数。

默认： function (time) { return (time + '').replace(/^($\d)$/, '0$1'); }

代码示例：

使用指定的minutesFormat选项初始化计时器：

$('.selector').downtime({minutesFormat: function (time) {
    return time + 'minutes'
}});

初始化后获取或设置minutesFormat选项：

// getter
var minutes_formater = $('.selector').downtime('option', 'minutesFormat');

// setter
$('.selector').downtime('option', 'minutesFormat', function (time) {
    return time + 'minutes'
});

secondsFormat

用于格式化秒组件的函数。

默认： function (time) { return (time + '').replace(/^($\d)$/, '0$1'); }

代码示例：

使用指定的secondsFormat选项初始化计时器：

$('.selector').downtime({secondsFormat: function (time) {
    return time + 'seconds'
}});

初始化后获取或设置secondsFormat选项：

// getter
var seconds_formater = $('.selector').downtime('option', 'secondsFormat');

// setter
$('.selector').downtime('option', 'secondsFormat', function (time) {
    return time + 'seconds'
});

方法

开始

如果计时器尚未运行，则启动计时器。

代码示例：

调用start方法：

$('.selector').downtime('start');

暂停

暂停正在运行的计时器。

代码示例：

调用pause方法：

$('.selector').downtime('pause');

停止

停止正在运行的计时器并重置时间。

代码示例：

调用stop方法：

$('.selector').downtime('stop');

显示

显示包含计时器的DOM元素。传递标准.show()参数。

代码示例：

调用show方法：

$('.selector').downtime('show', 'fast');

隐藏

隐藏包含计时器的DOM元素。传递标准.hide()参数。

代码示例：

调用hide方法：

$('.selector').downtime('hide', 'fast', function () {
    alert('animation complete');
});

活动

完整的（数据）

当计时器达到目标时触发。

代码示例：

使用指定的完整选项初始化计时器：

$('.selector').downtime({complete: function () {
    alert('All done!');
}});

初始化后获取或设置完整选项：

// getter
var complete_callback = $('.selector').downtime('option', 'complete');

// setter
$('.selector').downtime('option', 'complete', function () {
    alert('All done!');
});

downtime.update（事件，数据）

任何计时器滴答时都会触发此事件。

  • 事件：事件
  • 数据：
    • item：对象
    • 小时：整数
    • 分钟：整数
    • 秒：整数
    • 时间：整数

代码示例：

$(window).bind('downtime.update', function (event, data) {
    console.log('You have: ' + data.hours + ' hours ' + data.minutes + ' minutes ' + data.seconds ' seconds left to live');
});

downtime.complete（事件，数据）

任何计时器完成时都会触发此事件。

  • 事件：事件
  • 数据：
    • item：对象

代码示例：

$(window).bind('downtime.complete', function (event, data) {
    console.log(data.item, 'completed timer');
});

https://github.com/bytespider/downtime

猜你喜欢

转载自blog.csdn.net/wybshyy/article/details/82380408
今日推荐
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
Spring Boot 3.0：未来企业应用开发的基石
Java 的 AI 前景光明
国内首个智能体生态大会！2024百度万象大会定档5月30日
开源一周年，青语言新版发布
深入浅出：大型语言模型（LLM）的全面解读
顶会ICLR2024论文Time-LLM：基于大语言模型的时间序列预测
周排行
第五讲：AbstractBean以及Ioc常见注解使用和自动装配
python-re模块学习-正则表达式
黑客攻击常用手段
正则表达式的规则
windwos::mutex
Spring中日志的使用（log4j）
Bootstra5 按钮处理
JVM内存结构-这一篇全部了解
Android的低级错误
Oracle中Cursor, A表a1字段值复制到B表b1字段
每日归档
更多
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)
2024-05-26(6)
2024-05-25(68)
2024-05-24(65)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022