Question

我有以下倒数计时器功能：

jQuery.fn.countDown = function(settings,to) {
    settings = jQuery.extend({
                                startFontSize: "46px",
                                endFontSize: "18px",
                                duration: 1000,
                                endNumber: 0,
                                callBack: function() { }
                             },
                             settings);

    return this.each(function() {
        //where do we start?
        if(!to && to != settings.endNumber) { to = settings.startNumber; }

        //set the countdown to the starting number
        jQuery(this).text(to).css("fontSize",settings.startFontSize);

        //loopage
        jQuery(this).animate({fontSize: settings.endFontSize},
                             settings.duration,
                             "",
                             function() {
                                if(to > settings.endNumber + 1) {
                                    jQuery(this).css("fontSize",
                                    settings.startFontSize).text(to - 1).countDown(settings, to - 1);
                                } else {
                                    settings.callBack(this);
                                }
                             });
    });
};

要在我的页面上开始倒计时，我会像这样初始化它：

（这将使其从5倒数到0，显示在元素#countdown中）

jQuery("#countdown").countDown({
    startNumber: 5,
    callBack: function(me) { }
});

现在我有时需要取消正在运行的倒计时并开始新的倒计时。

例如，在3处停止倒计时并再次初始化以重新开始。

有人可以告诉我如何扩展此代码来做到这一点吗？

（原始计时器脚本取自http://davidwalsh.name/jquery-countdown-plugin）

诉

Answer 1

鉴于您可以访问某些设置，并执行您的计时器：

var settings = {
    startNumber: 5,
    callBack: function(me) {}
};
jQuery("#countdown").countDown(settings);

您可以像这样停止并重新启动计时器：

function stopAndRestart() {
    jQuery("#countdown").stop().countDown(settings);
}

.stop()停止给定元素上的动画（这恰好是这里计时的方法）

如何使用新方法扩展JavaScript倒计时器功能？

1 个答案: