从数组中选取随机数并使用Javascript设置RGB颜色

Question

当前的功能正在为RGB生成随机数并基于其设置RGB颜色。

function randomColor(){ 
    r = Math.floor(Math.random() * (256)); 
    g = Math.floor(Math.random() * (256)); 
    b = Math.floor(Math.random() * (256)); 
    jQuery('.bg').css('background-color','rgb('+r+','+g+','+b+')'); 
    jQuery('#ms-tile-color').attr('content','rgb('+r+','+g+','+b+')'); 
} 

jQuery(document).ready(function(){ 
    randomColor(); 
    var t = setInterval(randomColor,5000); 
}); 

function rollBg() { 
$('.bg.hidden').css('background', randomColor()); 
$('.bg').toggleClass('hidden'); 

}

我想创建一个数组类似下面的阵列，并选择从这个随机值，并保持设定的颜色。

var colourArray = [ 
{r: 40, g: 29, b: 45}, 
{r: 107, g: 107, b: 181}, 
{r: 78, g: 100 , b: 78} 

];

如何从阵列R，G设置的值，B

jQuery('.bg').css('background-color','rgb('+r+','+g+','+b+')'); 
jQuery('#ms-tile-color').attr('content','rgb('+r+','+g+','+b+')'); 

这就是我不理解

感谢您的帮助

Answer 1

你可以得到一个随机进入从数组中取出，然后引用元素中的字段，然后将其放入css中。

function randomColor() { 
 
    var rand = colourArray[Math.floor(Math.random() * colourArray.length)]; 
 
    r = rand.r 
 
    g = rand.g 
 
    b = rand.b 
 
    jQuery('.bg').css('background-color', 'rgb(' + r + ',' + g + ',' + b + ')'); 
 
    jQuery('#ms-tile-color').attr('content', 'rgb(' + r + ',' + g + ',' + b + ')'); 
 
} 
 

 
jQuery(document).ready(function() { 
 
    randomColor(); 
 
    var t = setInterval(randomColor, 5000); 
 
}); 
 

 
function rollBg() { 
 
    $('.bg.hidden').css('background', randomColor()); 
 
    $('.bg').toggleClass('hidden'); 
 
} 
 

 
var colourArray = [{ 
 
    r: 40, 
 
    g: 29, 
 
    b: 45 
 
    }, 
 
    { 
 
    r: 107, 
 
    g: 107, 
 
    b: 181 
 
    }, 
 
    { 
 
    r: 78, 
 
    g: 100, 
 
    b: 78 
 
    } 
 
]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ms-tile-color" class="bg" style="height: 100px; width: 100px;"></div>