javascript - 从数组中选择随机值并使用 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>