0

Jquery プラグインの作成は初めてです。次の jquery プラグインは、jQuery Boilerplate を使用して作成されます。カウントアップを行い、カウントアップが終了したら通知するだけです。
counter を 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));

ドキュメントの準備ができたら::

$('#countdown').countup({
                    onExpire:function() {
                        alert('hi');
                    },
                    countSince:new Date(),//count from this
                    countUpTo:30,//seconds from the countSince to expire
                    notifyAfter:20
})

その後、$('#countdown') で reset() 関数を呼び出したいと思います。どうやってするか？または、上記のコードを記述するより良い方法はありますか? ここで助けてください。

4

1 に答える 1

0

作成した定型コードは非常に複雑です。次の HTML と JavaScript (および jQuery を使用) は、0 から定義された秒数まで上方カウンターを実行しvar countTo、その時点で に格納されたメッセージを出力しvar successMsgます。リセットボタンは、カウンターをゼロから再開します。

HTML:

<div id="countdown"></div>
<input id="countreset" value="Reset" type="button" />​

JavaScript:

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();
    });
});​

ソリューションを jsFiddle に掲載しました: http://jsfiddle.net/TxVnS/2/

更新: 可変カウンター ID を許可するソリューションは次のとおりです: http://jsfiddle.net/TxVnS/6/

于 2012-06-01T05:28:25.897 に答える