选择随机数组,然后选择此数组中的元素

时间:2016-12-15 19:07:01

标签: javascript html arrays random

我试图弄清楚是否有可能首先选择一个随机数组(在加载时),然后选择一个来自这个所选数组的元素。例如,我有:

    var colorsOne = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsTwo = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsThree = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsFour = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsFive = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsSix = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsSeven = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsEight = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsNine = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsTen = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsEleven = ["#CCCCCC","#333333","#990099","#990099"];  
    var colorsTwelve = ["#CCCCCC","#333333","#990099","#990099"];  

12个数组(每个数组最终将填充不同的十六进制代码),我首先需要选择其中一个数组,然后从该数组中选择一个十六进制代码(随机)。

e.g。

var rand = Math.floor(Math.random() * 4);               
$('.header-wrap').css("background-color", colorsEight[rand]);

这会从coloursEight数组中取一个随机元素,但是我必须编程,我需要先选择一个数组,然后从这个数组中选择一个元素。

对此有任何建议将不胜感激!

4 个答案:

答案 0 :(得分:2)

问题的答案几乎是固有的。 :-)将数组放入一个数组中,然后做同样的事情:

var colors = [
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"],
    ["#CCCCCC","#333333","#990099","#990099"]
];

var array = colors[Math.floor(Math.random() * colors.length)];
var color = array[Math.floor(Math.random() * array.length)];
$('.header-wrap').css("background-color", color);

如果出于某种原因需要这些单独的数组变量,您仍然可以将它们聚集在一起:

var colorsOne = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsTwo = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsThree = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsFour = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsFive = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsSix = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsSeven = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsEight = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsNine = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsTen = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsEleven = ["#CCCCCC","#333333","#990099","#990099"];  
var colorsTwelve = ["#CCCCCC","#333333","#990099","#990099"]
var colors = [
    colorsOne,
    colorsTwo,
    colorsThree,
    colorsFour,
    colorsFive,
    colorsSix,
    colorsSeven,
    colorsEight,
    colorsNine,
    colorsTen,
    colorsEleven,
    colorsTwelve
];

var array = colors[Math.floor(Math.random() * colors.length)];
var color = array[Math.floor(Math.random() * array.length)];
$('.header-wrap').css("background-color", color);

答案 1 :(得分:1)

您只需要从所有现有阵列生成二维数组。

var super_array = [colorsOne, colorsTwo, ...];

然后简单地为super_array抓取一个随机索引,你现在有一个单独的数组可以用来满足你的心愿。

var rand_x = Math.floor(Math.random() * 4); 
var rand_y = Math.floor(Math.random() * 4);              
$('.header-wrap').css("background-color", super_array[rand_x][rand_y]);

答案 2 :(得分:0)

function randomArrVal(arr) {
 return arr[Math.floor(arr.length * Math.random())];
}
var array2D = [
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"],
  ["#CCCCCC","#333333","#990099","#990099"]
];

$('.header-wrap').css("background-color", randomArrVal(randomArrVal(array2D)));

答案 3 :(得分:0)

似乎没有理由创建命名数组。你可以创建一个多维数组并获得你想要的颜色。下面的片段演示了......

    // BUNDLE ALL THE INDIVIDUAL ARRAY OF COLORS
    // INTO ONE SINGLE ARRAY THUS CREATING A MULTI-DIMENSIONAL ARRAY.
    var arrHexColors    = [
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"],
        ["#CCCCCC","#333333","#990099","#990099"]
    ];

    // IF NECESSARY (SHOULD THE KEYS BE IMPORTANT TO YOU);
    // CREATE AN ARRAY TO HOLD THE KEYS TO THE INDIVIDUAL ARRAY...
    // THE IDEA HERE IS TO CREATE A PARALLEL ARRAY, WITH THE KEYS HERE
    // CORRESPONDING TO THE KEYS REPRESENTING ITS CONTENT IN THE MULTI-DIMENSIONAL ARRAY.
    var arrColorKeys    = [
        'colorsOne',
        'colorsTwo',
        'colorsThree',
        'colorsFour',
        'colorsFive',
        'colorsSix',
        'colorsSeven',
        'colorsEight',
        'colorsNine',
        'colorsTen',
        'colorsEleven',
        'colorsTwelve'
    ];

    // GENERATE A RANDOM NUMBER THAT SHOULD BE 
    // "ONE" LESS THAN THE LENGTH OF THE MULTI-DIMENSIONAL ARRAY
    var arrRandomColor  = arrHexColors[ Math.floor(Math.random() * arrHexColors.length) ];

    // DO THE SAME FOR THE COLOR KEYS ARRAY - IF NEEDED....
    var arrRandomKey    = arrRandomColor[ Math.floor(Math.random() * arrRandomColor.length) ];

    // USING THE GENERATED RANDOM NUMBER PICK THE ARRAY 
    // CORRESPONDING TO THAT KEY
    var randomColor     = arrRandomColor[ Math.floor(Math.random() * arrRandomColor.length) ];

    $('.header-wrap').css("background-color", randomColor);

    console.log(randomColor);