Javascript JS/jQuery-动画随机名称选择器

我正在尝试使用JS和jQuery创建一个抽奖票选脚本

到目前为止还不错——我的剧本很好用。不过现在我想让它更加直观，这样我们就可以在汇编中运行它了

我有一个JS对象，它采用以下格式：

var TempObj = { 'Student_ID' : i, 'Student_Name' : data.users[i].Student_Name };
RewardPurchases.PurchasesArray[Count] = TempObj;

然后我用这个代码随机选择一个学生：

$('button#random').click( function() {
    // "Total" is just the array length
    var Num = Math.floor(Math.random() * Total+1);
    Num--;

    // prove that the system has picked a random number out of the list
    alert("Random number out of " + Total + " is..." + Num);

    // find the array entry where the key is our random "Num"
    for (var i in RewardPurchases.PurchasesArray) {
        if (i == Num) {
            // we've found our entry, now we need more information about the corresponding student
            var TutorGroup = '';

            Frog.API.get('timetable.getClasses',
            {
                'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID },
                'onSuccess': function(data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].subject.name == "Tut Period") {
                            TutorGroup = data[i].name.replace("/Tp", "");
                        }
                    }
                }
            });

            // print out the student's information - he or she is the winner!
            alert("Ticket number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")");
        }
    }
} );

---

提前谢谢，

如果我理解你的问题，你想要这样的东西： 在数字比较之前输入此项

$('#nameDisplay').text(RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase()).show().delay(300);

在警报之前/而不是在警报之前的

if语句中输入以下内容：

$('#nameDisplay').animate({'font-size': 36}, 1500, function() {
    $(this).prepend('<span>!!! WINNER !!!</span>');
});

$（“#名称显示”）.animate（{'font-size'：36}，1500，function（）{
$（这个）。前置（“！！！赢家！！！”）；
});

namediplay
应该是页面上的某种（隐藏）元素，按照您喜欢的样式设置。
尝试试用
CSS
和动画功能，以获得插入的跨距和
namediplay
元素的好看结果。
好的，因此您希望程序在1和（学生总数）之间选择一个随机数，这将是获胜的学生。这个号码与学生的身份证号码相关联，因此如果随机选择45号，则45号学生获胜

看起来你已经有了这个功能，所以下一步你需要一个类似于老虎机彩票旋转器的东西来翻转名字并“表演”挑选中奖号码。很可能，中奖号码的选择与彩票动画完全分离，没有理由让随机号码选择花费超过需要的时间（毕竟，这只是一行代码）

因此，对于您的动画，为什么不直接循环浏览学生列表中的每个条目，逐个显示一到两次，然后在第三个循环中，它会在获奖名称上停止并相应地强调它。例如：马克，简，戴夫，马克，简，戴夫，马克，简是赢家！！显然，动画和风格，无论你喜欢它

简言之，你寻求的答案是选择获胜者，而不是立即显示，然后将所有名字循环若干次，最后到达获胜者。希望这能让您在不直接为您编程的情况下朝着正确的方向前进：）
小的改进（如果您愿意，请跳过）
首先，要指出代码中的改进：

for (var i in RewardPurchases.PurchasesArray) {
    if (i == Num) {      
    //Do stuff with RewardPurchases.PurchasesArray[i]
    } 
 }

我建议你：

//Do stuff with RewardPurchases.PurchasesArray[Num]

不需要不必要的循环（除非您也希望有一个
else
语句）

回到问题：）
假设您已经选择了获胜者，并将索引存储在
Num
中。使用包含获胜者的
id=“winner”
创建一个div！块，以及一个带有
id=studentName
的div，用于保存闪烁的学生姓名。两者都应该隐藏起来

现在，请执行以下操作：

var flashDelay=100; //number of milliseconds to flash each name
var flashTimes=50; //Flash a random username this many times

var lastStudent=-1; //holds the last student displayed to avoid awkward repeats
function flashStudent(){
var randStudent=Math.floor(Math.random() * Total+1);
if(Num==randStudent||Num==lastStudent){
   flashStudent();   //don't show the winner till the end. Also don't repeat students immediately
}else{
   lastStudent=Num; 
   flashTimes--; //decrement count
   $("#studentName").css("display","block") //display if hidden
   $("winner").html(RewardPurchases.PurchasesArray[randStudent].Student_Name); //show name
   if(flashTimes==0){
    clearInterval(flashNames);
     $("#studentName").css("display","block") //display if hidden
     $("#studentName").css("display","block") //display if hidden
     $("#studentName").html(RewardPurchases.PurchasesArray[Num].Student_Name);         
   }
}
}
var flashNames=setInterval(flashStudent,flashTimes) //make the method repeat evert flashTimes milliseconds

我建议一个更好的方法，它像轮盘赌一样“减速到停止”：

var flashDelay=10; //number of milliseconds to initially flash each name
var flashIncrement=10 //number of milliseconds to increment the delay by each time
var flashTimes=50; //Flash a random username this many times

var lastStudent=-1; //holds the last student displayed to avoid awkward repeats
function flashStudent(){
var randStudent=Math.floor(Math.random() * Total+1);
if(Num==randStudent||Num==lastStudent){
   flashStudent();   //don't show the winner till the end. Also don't repeat students immediately
}else{
   lastStudent=Num; 
   flashTimes--; //decrement count
   $("#studentName").css("display","block") //display if hidden
   $("winner").html(RewardPurchases.PurchasesArray[randStudent].Student_Name); //show name
   if(flashTimes==0){
     $("#studentName").css("display","block") //display if hidden
     $("#studentName").css("display","block") //display if hidden
     $("#studentName").html(RewardPurchases.PurchasesArray[Num].Student_Name);         
   }else{
     
     setTimeout(flashStudent,flashDelay); //set timeout for next name
     flashDelay+=flashIncrement; //increment delay
   }
}
}

我还没有完全测试过这一点——明天我将制作一个测试数组并进行测试。
我在JSFIDLE上为您提供了一些有用的东西。我删除了与演示无关的代码，并添加了一些改进。查看代码以了解更多信息

var students = [
    { 'Student_ID': 0, 'Student_Name': "one" },
    { 'Student_ID': 1, 'Student_Name': "two" },
    { 'Student_ID': 2, 'Student_Name': "three" },
    { 'Student_ID': 3, 'Student_Name': "four" },
    { 'Student_ID': 4, 'Student_Name': "five" },
    { 'Student_ID': 5, 'Student_Name': "six" },
    { 'Student_ID': 6, 'Student_Name': "seven" },
];

var $display = $("#display");

$('#random').click(function(){
    var total = students.length,
        selected = Math.floor( Math.random() * total ),
        i = 0;

    console.log( "selected", selected );
    $display.animate( {"font-size": "12px"}, 0 );

    // improvement: use a for loop, instead of a for..in
    for (i=0; i<total; i++) {

        console.log( "for", i );
        // here is the trick, use an Immediately-Invoked Function Expression (IIFE)
        // see http://benalman.com/news/2010/11/immediately-invoked-function-expression/
        setTimeout((function(i){
            return function(){
                // code here will be delayed
                console.log( "timeout", i );
                $display.text( students[i].Student_Name.toUpperCase() );
                if( i === selected ) {
                    $display.animate( {"font-size": "30px"}, "fast" );
                }
            };
        }(i)), i*250);

        // improvement: triple equal sign, always !
        if( i === selected ) {
            // code here will execute immediately
            break;
        }
    }

});

var学生=[
{“学生ID”：0，“学生姓名”：“一”}，
{'Student_ID'：1，'Student_Name'：“two”}，
{‘学生ID’：2，‘学生姓名’：“三”}，
{'Student_ID'：3，'Student_Name'：“four”}，
{‘学生ID’：4，‘学生姓名’：“五”}，
{'Student_ID'：5，'Student_Name'：“six”}，
{'Student_ID'：6，'Student_Name'：“seven”}，
];
变量$display=$（“#display”）；
$（'#random'）。单击（函数（）{
var total=students.length，
选定=数学地板（数学随机（）*总计），
i=0；
console.log（“已选择”，已选择）；
$display.animate（{“字体大小”：“12px”}，0）；
//改进：在中使用for循环，而不是for
对于（i=0；iHi@jb10210，我想给你答案，但由于这个奇怪的问题，我无法测试它：现在解决了这个问题！但是，你的代码实际上并没有通过学生列出，它只是显示一个，然后以动画方式将获胜者追加。你可以使用inne将文本插入到div中，而不是在div中追加/前置名称innerHTML是读/写的，因此当它写入div时，它将销毁div中的任何内容
var students = [
    { 'Student_ID': 0, 'Student_Name': "one" },
    { 'Student_ID': 1, 'Student_Name': "two" },
    { 'Student_ID': 2, 'Student_Name': "three" },
    { 'Student_ID': 3, 'Student_Name': "four" },
    { 'Student_ID': 4, 'Student_Name': "five" },
    { 'Student_ID': 5, 'Student_Name': "six" },
    { 'Student_ID': 6, 'Student_Name': "seven" },
];

var $display = $("#display");

$('#random').click(function(){
    var total = students.length,
        selected = Math.floor( Math.random() * total ),
        i = 0;

    console.log( "selected", selected );
    $display.animate( {"font-size": "12px"}, 0 );

    // improvement: use a for loop, instead of a for..in
    for (i=0; i<total; i++) {

        console.log( "for", i );
        // here is the trick, use an Immediately-Invoked Function Expression (IIFE)
        // see http://benalman.com/news/2010/11/immediately-invoked-function-expression/
        setTimeout((function(i){
            return function(){
                // code here will be delayed
                console.log( "timeout", i );
                $display.text( students[i].Student_Name.toUpperCase() );
                if( i === selected ) {
                    $display.animate( {"font-size": "30px"}, "fast" );
                }
            };
        }(i)), i*250);

        // improvement: triple equal sign, always !
        if( i === selected ) {
            // code here will execute immediately
            break;
        }
    }

});