downtime.js。倒計時JQ外掛年月日
阿新 • • 發佈：2018-11-29
| /*! | |
| * 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');
});