1

私はJQueryの初心者です。このコードは、jquery で数値アニメーションを作成するというアイデアがあったスタック オーバーフローのどこかから取得しました。これで、コードは 1 つの数値アニメーションで正常に機能しましたが、2 番目のスクリプトで 2 番目のアニメーションを追加するとすぐに、最初の数値はアニメーション化しません。機能の衝突はありますか?? ありがとう。ここにJSスクリプトがあります

<script>
$(function () {
    var ele = $('#num1');
    var clr = null;
    var rand = 0;//Starting Point
    (loop = function () {
        clearTimeout(clr);
        (inloop = function () {
            ele.html(rand += 1);
            if (!(rand % 60)) {  //20 is the Finished Value
                return;
            }
            clr = setTimeout(inloop, 32); //SPEED OF ANIMATION
        })();
        //  setTimeout(loop, 2500); //Increment Loop TIme
    })();
});

そして、html

     <div id="num1"></div>

次に、#num1 の代わりに #num2 を使用し、div num2 を使用して 2 番目のスクリプトを追加します。しかし、問題が発生します。ありがとう。私を助けてください。非常に高く評価されています。

4

3 に答える 3

1

この問題を解決するには、var キーワードを使用してループ変数とインループ変数を宣言します。これにより、変数は現在グローバルスコープにあるため、スコープ内でローカルになります（varを使用していないため）。

$(function () {
var ele = $('#num1');
var clr = null;
var rand = 0;//Starting Point
var loop;
(loop = function () {
    var inloop;
    clearTimeout(clr);
    (inloop = function () {
        ele.html(rand += 1);
        if (!(rand % 60)) {  //20 is the Finished Value
            return;
        }
        clr = setTimeout(inloop, 32); //SPEED OF ANIMATION
    })();
    //  setTimeout(loop, 2500); //Increment Loop TIme
})();
});
于 2013-07-14T04:05:49.770 に答える
1

これがあなたのコードです。少しだけクリーンアップして関数に変えたので、複数回使用できます。いくつかの回答が表示されますが、これを見て、コードをより明確にし、使いやすく、信頼性を高めるために別の方法で何ができたかを学ぶことができると思います.

http://jsfiddle.net/6VHYT/7/

$(function () {
    // it is bad to copy/paste code, so lets put a function here
    function risingNumber(start,end,jqstr,speed){
        // speed is optional, others required
        var clr = null;
        var ele = $(jqstr);
        var rand = start;//Starting Point
        if (arguments.length<3) throw "risingNumber needs 3 params";
        // note new functions to replace potentially confusing use of inline
        // and use of var to make a local, not global
        function loop() {
            clearTimeout(clr);
            function inloop() {
                ele.html(rand += 1);
                if (!(rand < end)) {  //end is the Finished Value
                    return;
                }
                clr = setTimeout(inloop, (speed || 32)); //SPEED OF ANIMATION
            };
            inloop();
            //  setTimeout(loop, 2500); //Increment Loop TIme
        };
        loop();
    }
    risingNumber(0,60,'#num1');
    risingNumber(0,100,'#num2');

});
于 2013-07-14T04:18:04.493 に答える
0

ここにあなたを助けるかもしれないフィドルがあります：http://jsfiddle.net/gQeeR/

$(function () {
    function loop(selector) {
        var count = 0;
        var interval = setInterval(function() {
            $(selector).html(count++);
            if (!(count % 60))  {
                $(selector).html(count);
                clearInterval(interval);
            }
        }, 32);
    }
    loop('#num1');
    loop('#num2');
});
于 2013-07-14T04:11:02.107 に答える