javascript - 使用 setinterval 在最终数字之前显示随机数字

Question

我有 3 个 div（#digit1、#digit2、#digit3），代表已知数字的 3 位数字（例如：459）。在显示实际数字之前，我想为每个数字显示 20 个从 0 到 9（每 100 毫秒）的随机数。

使用 jQuery，我可以显示第一个数字，如下所示：

    function displayInterval(callback,currentnumber) {
        x = 0;
        var interval = window.setInterval(function () {

           callback();

           if (++x === 20) {
               window.clearInterval(interval);
                $("#digit1").html(currentnumber);                  
           }
        }, 100);
    }

    var number1="4";    
    var number2="5";
    var number3="9";    


    displayInterval(function () {
        var randomnumber=Math.floor(Math.random()*10);
        $("#digit1").html(randomnumber);
    },number1);

如果我再添加 2 次调用 displayInterval，它只适用于 1 位数字，而另外两个将永远显示随机数。

在此先感谢您的帮助！

注意：以上只是我需要的一个简化示例。我的号码可以有 1 到 6 位数字，如果超过 3 位数字（例如：12 450），则必须放置一个空格，这就是为什么我需要将每个数字放在一个单独的 div 中。

Answer 1

您应该使用数组来存储数字。并把每三个数字之间的差距。

jsFiddle 现场演示

正如您在问题中所说的那样，您应该为每个数字放置一个 div（查看演示）。

将您的 JavaScript 更改为此并查看演示的 HTML 代码。

function displayInterval(callback) {
     x = 0;
     var interval = window.setInterval(function() {
           callback();
           if (++x === 20) {
               window.clearInterval(interval);

               var nums = $("div[num]");
               var max  = $("div[num]").reverse().attr('num');
               var i = max, j=1;
               $.each( nums, function( key, value ) {
                   if(j%3==0) {
                       $("div[num='"+i+"']").html("&nbsp"+$(this).attr("value"));
                   } else {
                       $("div[num='"+i+"']").html($(this).attr("value"));
                   }
                   i--;j++;
               });                 
           }
    }, 100);
}

displayInterval(function () {
    var nums = $("div[num]");
    var max  = $("div[num]").reverse().attr('num');
    var i = max, j=1;
    $.each( nums, function( key, value ) {
         var randomnumber=Math.floor(Math.random()*10)+"";
         if(j%3==0 && i != max) {
             $("div[num='"+i+"']").html("&nbsp"+randomnumber);
         } else {
             $("div[num='"+i+"']").html(randomnumber);
         }
         i--;j++;
    });  
});