從數組中選取隨機數並使用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>