这是我第一次尝试创建 jquery 插件,所以我认为 id 开始很简单,但即使这样也很麻烦......
这是我的代码。
(function($){
$.fn.elapsed = function(options) {
var defaults = { seconds: true, minutes: true, hours: true, days: true };
var options = $.extend(defaults, options);
var ob = $(this);
var secs = 0, mins = 0, hours = 0, days = 0;
function elapsed_time( secs, mins, hours, days ){
if( secs == 59 ) { mins++; secs = 0; }
if( mins == 59 ) { hours++; mins = 0; }
if( hours == 23 ) { days++; hours = 0; }
ob.html( ( days === true ? days + ':' : false ) + ( hours === true ? hours + ':' : false ) + ( mins === true ? mins + ':' : false ) + ( secs === true ? secs + ':' : false ) );
window.setTimeout( function(){ secs++; elapsed_time( secs, mins, hours, days ); }, 1000 );
}
elapsed_time( secs, mins, hours, days );
};
})(jQuery);
似乎什么也没发生...谁能告诉我哪里出了问题?
最佳答案
您在显示中使用了相同的变量名称,我认为这是无意的,如下:
ob.html( ( days === true ? days + ':' : false ) +
( hours === true ? hours + ':' : false ) +
( mins === true ? mins + ':' : false ) +
( secs === true ? secs + ':' : false ) );
应该更像这样:
ob.html( ( options.days ? days + ':' : '') +
( options.hours ? hours + ':' : '') +
( options.minutes ? mins + ':' : '' ) +
( options.seconds ? secs : '') );
在这些条件中,如果显示该间隔,则希望显示分隔符,如果不显示,则不显示 false
或 0
(我认为这是无论如何,你的意图)。由于这里的 secs
从 0
开始,所以它根本没有改变,因为 0
是 false。
此外,您的间隔时间应该在它们到达时而不是在之前发生变化,因此对于分钟/小时,即 60 和第 24 天,如下所示:
if( secs == 60 ) { mins++; secs = 0; }
if( mins == 60 ) { hours++; mins = 0; }
if( hours == 24 ) { days++; hours = 0; }
....最后一个 this
已经是插件内的 jQuery 对象,所以你可以这样做:
var ob = this;
总的来说,看起来像这样:
(function($){
$.fn.elapsed = function(options) {
var defaults = { seconds: true, minutes: true, hours: true, days: true };
var options = $.extend(defaults, options);
var ob = this;
var secs = 0, mins = 0, hours = 0, days = 0;
function elapsed_time( secs, mins, hours, days ){
if( secs == 60 ) { mins++; secs = 0; }
if( mins == 60 ) { hours++; mins = 0; }
if( hours == 24 ) { days++; hours = 0; }
ob.html( ( options.days ? days + ':' : '') +
( options.hours ? hours + ':' : '') +
( options.minutes ? mins + ':' : '' ) +
( options.seconds ? secs : '') );
window.setTimeout( function(){ secs++; elapsed_time( secs, mins, hours, days ); }, 1000 );
}
elapsed_time( secs, mins, hours, days );
};
})(jQuery);
关于jquery - 创建一个 jquery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5203177/