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

Displaying random digits before final number with setinterval

本文关键字：数字 随机 显示 setinterval 使用      更新时间：2023-09-26

我有3个div (#digit1， #digit2， #digit3)，代表一个已知数字的3位数字(例如:459)。我想在显示实际数字之前，为每个数字显示从0到9的20个随机数(每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位数字(例如:12450)，则必须放置空格，这就是为什么我需要将每个数字放在单独的div中。

应该使用数组来存储数字。在每三个数字之间间隔一个空格。

jsFiddle Live DEMO

你应该像你在问题中所说的那样为每个数字设置一个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++;
    });  
});
相关文章：