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

 

downtime.js

/*!
 * jQuery downtime plugin
 * version 0.2
 * Author: Rob Griffiths <rob@bytespider.eu> 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  functiontime){       / *格式化小时组件* /
        返回时间+  '小时'的可选功能 ;          / *默认值:返回组件填充2位* /
    },
    minutesFormat  functiontime){     / *格式化分钟组件的可选函数* /
        返回时间+  '分钟' ;        / *默认值:返回组件填充2位* /
    },
    secondsFormat  functiontime){     / *格式化秒组件* /
        返回时间+  ' 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

posted @ 2018-09-04 11:08  离。  阅读(39)  评论(0编辑  收藏  举报