Question

我有15个带有文本元素的div，想要关注：

在每个页面加载时，div-background-color和text-element-color应该变成随机选择的颜色组合。

我有10个text-＆amp; -background-color-combinations：组合-1：文本蓝色/背景色青色组合-2：文字黄色/背景色粉红色组合-3：文字青色/背景色红色组合-4：文本红色/背景色蓝色等。

现在我想要一个jQuery脚本随机给div的颜色组合（text-color和div-background-color）。

请考虑，我不想随机颜色，而是随机颜色组合（随机颜色对）。

你能以某种方式帮助我吗？

$(document).ready(function () {
    var back = ["#ff0000","blue","gray", "red", "green", "white"];
    var rand = back[Math.floor(Math.random() * back.length)];
    console.log(rand);
    $('div').css('background',rand);
    $('span').css('color',rand);
    })

div {
    width:200px;
    height:200px;
    background:red;
}

<div>
<span>text</span>
</div>

http://jsfiddle.net/sJTHc/356/ （文字和背景总是相同的随机颜色）

我不知道如何解决这个组合问题...

Answer 1

这样的事情怎么样：

var colors = [
    ['blue', 'cyan'],
    ['yellow', 'pink'],
    // etc…
];

function getRandomColorCombination(colors) {
    var random = parseInt(Math.random() * colors.length);

    return colors[random];
}

$('div').each(function () {
    var randomColorCombination = getRandomColorCombination(colors);

    $(this).css('color', randomColorCombination[0]);
    $(this).css('backgroundColor', randomColorCombination[1]);
});

随机颜色组合（文本/背景）

1 个答案: