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 ： 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