Javascript Jquery倒计时插件使用;jQuery样板文件;
我是Jquery插件创建新手。以下jquery插件是使用jquery样板创建的。它只需进行计数,并在计数完成时通知。Javascript Jquery倒计时插件使用;jQuery样板文件;,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,我是Jquery插件创建新手。以下jquery插件是使用jquery样板创建的。它只需进行计数,并在计数完成时通知。 我想有一个功能,重新启动计数设置计数器为0; 我不明白如何调用重置功能 ;(function ( $, window, undefined ) { var pluginName = 'countup', document = window.document, defaults = {
我想有一个功能,重新启动计数设置计数器为0; 我不明白如何调用重置功能
;(function ( $, window, undefined ) {
var pluginName = 'countup',
document = window.document,
defaults = {
countSince: new Date(),
countUpTo:120,
notifyAfter:110,
onExpire:function() {
},
};
// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {counter:0}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
this.tick();
};
Plugin.prototype.reset = function () {
this.options.counter = 0;
};
Plugin.prototype.tick = function () {
if (this.options.counter > this.options.countUpTo) {
//timer expired
this.options.onExpire($(this.element));
}
else {
if (this.options.counter > this.options.notifyAfter) {
$(this.element).find('span').html('<strong style="font-size: 15px; color:#ff0000;">' + this.options.counter+ ' seconds</strong>');
}
else {
$(this.element).find('span').html('<strong style="font-size: 15px; color:#3366ff">' + this.options.counter + ' seconds</strong>');
}
setTimeout(function() {
this.options.counter += 1;
this.tick();
}, 1000);//calling tick function again
}
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
}
});
};
}(jQuery, window));
之后,我想对$(“#倒计时”)调用reset()函数。怎么做?还是有更好的方法来编写上述代码?请在这里给我一些帮助。您创建的锅炉铭牌代码非常复杂。以下HTML和JavaScript(以及jQuery)将完成一个从0到
var countTo
定义的秒数的向上计数器,此时它将打印存储在var successsg
中的消息。复位按钮将计数器重新启动到零位
HTML:
我已经在JSFIDLE上发布了解决方案:
更新:
这里有一个允许使用可变计数器ID的解决方案:是的,可以。但我想让多个计数器绑定到元素的数量。这就是为什么我想到了一个插件。嘿,Ninearts,你的问题没有说明这一点,所以我不打算在StackOverflow上更新解决方案(因为我认为最好保持简单),但我已经在JSFIDLE上更新了JavaScript和HTML。以下是更新代码的链接,该代码将id作为计数器和重置按钮的参数:
$('#countdown').countup({
onExpire:function() {
alert('hi');
},
countSince:new Date(),//count from this
countUpTo:30,//seconds from the countSince to expire
notifyAfter:20
})
<div id="countdown"></div>
<input id="countreset" value="Reset" type="button" />
var countTo = 5; // Time to count to
var successMsg = 'hi'; // Replace count with this message at max number of seconds
function countUp() {
var countdown = $('#countdown');
// Turn contents into integer
var current = parseInt(countdown.html());
// Increment seconds
var next = current+1;
if (next >= countTo) {
// If at max seconds, replace with message
countdown.html(successMsg);
} else {
// Replace seconds with next second
countdown.html(next);
setTimeout(countUp, 1000);
}
}
function startCountdown() {
var countdown = $('#countdown');
// Set to zero seconds
countdown.html('0');
// Start counting
setTimeout(countUp, 1000);
}
$(document).ready(function() {
// Start the countdown
startCountdown();
$('#countreset').click(function() {
// On reset button .click(), start countdown
startCountdown();
});
});