1

この Jquery カウントアップ関数を機能させようとしていますが、表示されません。誰かが私が間違っていることを教えてもらえますか?

「mhuggins」(https://github.com/mhuggins/jquery-countTo)によって作成された関数を使用しているため、自分で作成したのではなく、機能させようとしています。

countup.js

    (function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

そして、このhtmlページで使用しようとしています

test.html

<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.6.2.js"></script>
<script type="text/javascript" src="scripts/countup.js"></script>
<script type="text/javascript"><!--
    $('.timer').countTo({from: 0, to: 500});
//--></script>
</head>

<body>
<span class="timer"></span>
</body>
</html>

ページを起動しても何も起こりません。スクリプトは他の人のために機能しているので、何か間違ったことをしているのは明らかに私です。私はこれに非常に慣れていないので、驚くべきことではありません。

ありがとう!

4

3 に答える 3

4

行方不明のようですdocument.ready(function() { // timer code here });

于 2012-07-09T10:35:53.800 に答える
2

<span class="timer">スクリプトが実行されるときはありません。DOMready ハンドラーとして追加します。

<script type="text/javascript"><!--
    jQuery(function($) {
        $('.timer').countTo({from: 0, to: 500});
    });
//--></script>
</head>

または、本文の最後で実行します。

<body>
    <span class="timer"></span>
    <script type="text/javascript"><!--
        $('.timer').countTo({from: 0, to: 500});
    //--></script>
</body>
于 2012-07-09T10:37:22.277 に答える
1
$(document).ready(function(){
    $('.timer').countTo({from: 0, to: 500});
});
于 2012-07-09T10:37:32.157 に答える