1

我是 JQuery 的新手。我从这里的堆栈溢出处获得了这段代码，其想法是在 jquery 中创建数字动画。现在代码对于一个数字动画效果很好，但是一旦我用第二个脚本添加第二个动画，第一个数字就不会动画。有没有功能冲突？？谢谢。这是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>

现在我用#num2 代替#num1 和div num2 添加第二个脚本。但问题发生了。谢谢。请帮我。非常赞赏。

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 回答