Question

我正在尝试使用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 + ")");
        }
    }
} );

我想 - 非常简短地 - 显示每个学生的名字，直到选中门票（即找到RewardPurchases.PurchasesArray[Num]），然后我希望它停止并增加字体大小（并且可能会说赢家！在它之上或之类的东西）。

使用jQuery是否可行且相对简单？

修改

我尝试了以下代码，它只显示一个名称。我哪里错了？

$('button#random').click( function() {
    var Num = Math.floor(Math.random() * Total);

    for (var i in RewardPurchases.PurchasesArray) {

        if (typeof RewardPurchases.PurchasesArray[i] === 'object' && typeof RewardPurchases.PurchasesArray[i] !== null) {

            $('#display').queue( function() { 
                $(this).text(RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase()).show().delay(250); 
                $(this).dequeue();
            } );

        }

        if (i == Num) {
            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", "");
                        }
                    }
                }
            });

            break;
        }
    }
} );

提前致谢，

Answer 1

如果我理解你的问题，你想要这样的事情：在数字比较之前输入。

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

在if statement之前/ {而不是alert：

中的

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

内输入此内容

nameDisplay

CSS应该是您网页上的某种（隐藏）元素，风格如您所愿。尝试使用nameDisplay和动画函数进行试验，以便为插入的范围和{{1}}元素获得漂亮的结果。

Answer 2

好的，所以你希望程序选择1到（学生总数）之间的随机数，这将是获奖学生。这个数字与学生的身份证号码相关联，因此如果随机选择＃45，学生＃45就会获胜。

好像你已经有了这个位工作，所以接下来你会想要一种老虎机抽奖旋转器来翻阅名字和“制作一个选择获胜号码的节目”。可能，中奖号码将完全与彩票动画分开，没有理由让随机数字选择花费的时间超过需要的时间（毕竟只有一行代码）。

因此，对于您的动画，为什么不循环浏览学生列表中的每个条目，一个接一个地显示一个或两个，然后在第三个循环中停止在获胜的名称上并相应地强调它。例如：Mark，Jane，Dave，Mark Jane，Dave，Mark，JANE是赢家！显然动画＆amp;但是你喜欢它。

简而言之，您寻求的答案是挑选胜利者，而不是立即显示，然后将所有名称循环一次并最终落在获胜者身上。希望这能让你朝着正确的方向前进而不直接为你做编程：）

Answer 3

小改进（如果需要，可跳过）

首先，要指出代码的改进：

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
   }
}
}

我还没有对此进行全面测试 - 明天我会制作一个测试阵列并进行测试。

Answer 4

我在jsfiddle http://jsfiddle.net/pomeh/63hug/上为你提供了一些工作。我删除了不相关的演示代码，并添加了一些改进。查看代码以了解更多信息。

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;
        }
    }

});

您可以在此处了解有关Javascript 变量提升的更多信息http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting。

此外，您应该查看此常见Javascript混淆列表中的第4点http://tobyho.com/2011/11/16/7-common-js-mistakes-or-confusions/

希望有所帮助：）

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

4 个答案:

小改进（如果需要，可跳过）

回到问题：）