Javascript：随机数为5，在重复使用之前不重复 [英] Javascript: Random number out of 5, no repeat until all have been used

问题描述

我使用以下代码为我页面上的每个单独图像分配一个随机类（五个）。

I am using the below code to assign a random class (out of five) to each individual image on my page.

$(this).addClass('color-' + (Math.floor(Math.random() * 5) + 1));

它工作得很好但是我想要这样做，以便在一个相同的类中永远不会有两个行。

It's working great but I want to make it so that there are never two of the same class in a row.

如果连续两个中没有两个相同的话会更好，并且在使用所有5个之前它也不会多次使用任何类。 。如同，从数组中删除每个使用过的类，直到所有使用过的类，然后重新开始，不允许前一个5的最后一个和下一个5中的第一个是相同的颜色。

Even better would be if there were never two of the same in a row, and it also did not use any class more than once until all 5 had been used... As in, remove each used class from the array until all of them have been used, then start again, not allowing the last of the previous 5 and the first of the next 5 to be the same color.

希望有意义，并提前感谢任何帮助。

Hope that makes sense, and thanks in advance for any help.

推荐答案

你需要创建一个可能值的数组，每次从数组中检索一个随机索引以使用其中一个值时，将其从数组中删除。

You need to create an array of the possible values and each time you retrieve a random index from the array to use one of the values, you remove it from the array.

这是一般的目的随机函数，在使用所有值之前不会重复。您可以调用它，然后只需将此索引添加到类名的末尾。

Here's a general purpose random function that will not repeat until all values have been used. You can call this and then just add this index onto the end of your class name.

var uniqueRandoms = [];
var numRandoms = 5;
function makeUniqueRandom() {
    // refill the array if needed
    if (!uniqueRandoms.length) {
        for (var i = 0; i < numRandoms; i++) {
            uniqueRandoms.push(i);
        }
    }
    var index = Math.floor(Math.random() * uniqueRandoms.length);
    var val = uniqueRandoms[index];

    // now remove that value from the array
    uniqueRandoms.splice(index, 1);

    return val;

}

工作演示： http://jsfiddle.net/jfriend00/H9bLH/

所以，你的代码就是这样：

So, your code would just be this:

$(this).addClass('color-' + (makeUniqueRandom() + 1));

---

这是一个面向对象的形式，允许超过其中一个用于您应用中的不同位置：

---

Here's an object oriented form that will allow more than one of these to be used in different places in your app:

// if only one argument is passed, it will assume that is the high
// limit and the low limit will be set to zero
// so you can use either r = new randomeGenerator(9);
// or r = new randomGenerator(0, 9);
function randomGenerator(low, high) {
    if (arguments.length < 2) {
        high = low;
        low = 0;
    }
    this.low = low;
    this.high = high;
    this.reset();
}

randomGenerator.prototype = {
    reset: function() {
        this.remaining = [];
        for (var i = this.low; i <= this.high; i++) {
            this.remaining.push(i);
        }
    },
    get: function() {
        if (!this.remaining.length) {
            this.reset();
        }
        var index = Math.floor(Math.random() * this.remaining.length);
        var val = this.remaining[index];
        this.remaining.splice(index, 1);
        return val;        
    }
}

样本用法：

var r = new randomGenerator(1, 9);
var rand1 = r.get();
var rand2 = r.get();

工作演示： http://jsfiddle.net/jfriend00/q36Lk4hk/

这篇关于Javascript：随机数为5，在重复使用之前不重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！