配列からランダム値を取得し、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} 

];私はあなたがランダムなエントリを取得することができ、あなたの助け

Answer 1

ため

感謝を理解していないですどこ

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

bはこれは、配列のR、G、Bの値を設定するにはどうすればよい

あなたがつかんだ要素の中のフィールドを参照して、それを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>