[英]jQuery Plugin with setTimeout or setInterval
我正在开发我的第一个jQuery插件,它是一个简单的倒计时计时器,可以选择设置目标日期。 目的是获得一个纯文本时钟,倒计时到提供的目标日期和时间。 对于我一生,我无法弄清楚如何在插件中使用setTimeout或setInverval,因此它实际上会倒计时。 花了一整天的时间来研究stackoverflow和其他资源,但是找不到解决方案,因此,如果我没有得到解决,我们深表歉意。
这是我得到的:
(function( $ ){
$.fn.clock = function( options ) {
// ESTABLISH DEFAULTS
var settings = $.extend( {
'target' : '07/21/2013 09:00:00', // mm/dd/yyyy hh:mm:ss
}, options);
return this.each(function() {
// calculate milliseconds to target
tarDate = new Date(settings.target);
dateNow = new Date();
amount = tarDate.getTime() - dateNow.getTime();
delete dateNow;
// set label
label = settings.title;
// generate output
if(amount <= 0) {
out = '000:00:00:00';
} else {
td = 0; th = 0; tm = 0; ts = 0; out = ''; // reset everything
amount = Math.floor(amount/1000); // kill the milliseconds
td = Math.floor(amount/86400); // calculate days to target
amount = amount%86400; // convert amount to days
th = Math.floor(amount/3600); // calculate hours to target
amount = amount%3600; // convert amount to hours
tm = Math.floor(amount/60); // calculate minutes to target
amount = amount%60; // convert amount to minutes
ts = Math.floor(amount)+1; // calculate seconds to target
out += (td<=99?'0':'') + (td<=9?'0':'') + td + ':';
out += (th<=9?'0':'') + th + ':';
out += (tm<=9?'0':'') + tm + ':';
out += (ts<=9?'0':'') + ts;
}
// assemble and pump out to dom
$(this).html(out);
// set refresh rate
??????
});
};
})( jQuery );
我相信您必须在需要调用的函数内部设置setTimeout,并必须在其中调用setTimeout。然后进行条件设置,以便一旦其达到零,clearTimeout将会关闭http://jsfiddle.net/qUYQN/
查看此链接,了解有趣的插件创作模式。 基本上,您需要做的是提供一种“方法”来更新时钟:
(function( $ ){
function updateClock(element) {
var settings = element.data("settings");
// Your update logic goes here
}
$.fn.clock = function( options ) {
if ( options === 'update' )
return updateClock(this);
// Other methods, if any
else if ( typeof options !== 'object' )
throw 'Unknown method';
// ESTABLISH DEFAULTS
var settings = $.extend( {
'target' : '07/21/2013 09:00:00', // mm/dd/yyyy hh:mm:ss
}, options);
// Save your settings for later access
this.data("settings",settings);
然后,每次您想要更新元素时,都可以这样调用:
$(yourselector).clock("update");
(从外部;如果从您的范围可以访问updateClock
则可以直接调用它以提高效率。请记住,如有必要,请将该元素包装在$()
)
最后,您必须配置setTimeout
或setInterval
。 我希望使用setTimeout,因为这样可以在必要时停止或重新启动时钟。 将此添加到您的updateClock的末尾,可能先检查一下:
setTimeout(function() { updateClock(element); }, settings.refreshRate);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.