我只是想提高我的 JS 技能，我得到了 JS 以及它的一些工作原理，但对 Jquery 插件的工作原理有点困惑。
我已经启动了这个插件。当这只是被调用的独立函数时，它工作得很好，但我希望它是一个插件。
(function ( $ ) {
$.fn.countdown = function( options ) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
daySelector : "",
hourSelector : "",
minuteSelector : "",
secondSelector : "",
launchDate : new Date("December 25, 2013 12:01:00"),
procentageDone : 1,
headerColor : 'yellow',
progressFillColor : 'green',
description : {header:"Header",text:"sample text."}
}, options );
var secondsRemaining = Math.floor(settings.launchDate.getTime() / 1000) - Math.floor(new Date().getTime() / 1000);
/* Functions calls for countdown*/
count(secondsRemaining);
updateProgress(settings.procentageDone);
setHeaderColor(settings.headerColor);
setProgressFillColor(settings.progressFillColor);
setProgressDescription(settings.description['header'], settings.description['text']);
/* countdown functions */
var count = function(secondsRemaining) {
alert(secondsRemaining)
var days = Math.floor(secondsRemaining / 86400),
hours = Math.floor((secondsRemaining - (days * 86400)) / 3600),
minutes = Math.floor((secondsRemaining - (days * 86400) - (hours * 3600)) / 60),
seconds = secondsRemaining - (days * 86400) - (hours * 3600) - (minutes * 60);
if(secondsRemaining > 0) {
if(days < 10) { days = '0' + days; }
if(hours < 10) { hours = '0' + hours; }
if(minutes < 10) { minutes = '0' + minutes; }
if(seconds < 10) { seconds = '0' + seconds; }
$('.days > .number').html(days);
$('.hours > .number').html(hours);
$('.minutes > .number').html(minutes);
$('.seconds > .number').html(seconds);
secondsRemaining--;
} else {
if(secondsRemaining == 0) {window.location.reload();}
}
window.setTimeout(function() {countdown(secondsRemaining); }, 1000);
}
var updateProgress = function (procent) {
if(typeof procent !== "number") {procent = 0;}
if(procent <= 7) {
$('.progressBarFill').css({ width: '7%' }).find('.progressBarFillMiddle').html(procent + '%');
} else if(procent >= 100) {
$('.progressBarFill').css({ width: '100%' }).find('.progressBarFillMiddle').html('100%');
} else {
$('.progressBarFill').css({ width: procent + '%' }).find('.progressBarFillMiddle').html(procent + '%');
}
}
var setProgressDescription = function (header, text){
$('.progressDescriptionMiddle').find('.DescriptionHeader').html(header);
$('.progressDescriptionMiddle').find('.DescriptionText').html(text);
}
var objectConverter = function (array) {
var object = {};
for(var i=0; i<array.length; i++) {
object[array[i]] = '';
}
return object;
}
var setHeaderColor = function (color) {
color = color.toLowerCase();
if(typeof color === "undefined") {
color = 'yellow';
}
if(color in objectConverter(['green', 'blue', 'yellow', 'purple', 'red', 'gray'])) {
$('.header').attr('class', 'header').addClass(color);
}
}
var setProgressFillColor = function (color) {
color = color.toLowerCase();
if(typeof color === "undefined") {
color = 'green';
}
if(color in objectConverter(['green', 'blue', 'yellow', 'purple', 'red', 'gray'])) {
$('.progressBarFill').attr('class', 'progressBarFill clear').addClass(color);
}
}
};
}( jQuery ));
我想这样称呼它
$.countdown({
launchDate : new Date("December 25, 2013 12:01:00"),
procentageDone : 1,
headerColor : 'yellow',
progressFillColor : 'green',
description:{header:"Header Text", text:"this is sample text."}
});
但是我不确定如何调用插件中的函数来完成这项工作。请帮助我并澄清我对此事的想法。