我的问题是:我有一个颜色列表，jquery 使用它为我的 HTML 中的框 div 选择随机颜色。如果你点击“Random me”按钮，一切正常，每个方 block 都会随机选择颜色。但是，我想确保相邻的方 block 颜色不同(即方 block 1 颜色 = 黑色，方 block 2 颜色 = 红色， 方 block 3 颜色 = 黄色，方 block 4 颜色 = 紫色)。我希望每个 Square 都有自己独特的颜色，这些颜色是从 20 种颜色中选出的。所以我不要红、红、黄、紫或红、黄、红、紫等。
下面是我的所有代码(在头部添加 CSS 作为样式元素的 HTML)和(在页面底部添加的 jQuery，就在结束 body 标记之前)。
你们真棒。在此先感谢您的所有帮助。杰森
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Square Test</title>
<!-- CSS styles -->
<style>
.nw{background: #f09; top: 0; left: 0; right: 50%; bottom: 50%}
.ne{background: #f90; top: 0; left: 50%; right: 0; bottom: 50%}
.sw{background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
.se{background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
html, body{width: 100%; height: 100%; padding: 0; margin: 0}
div{position: absolute; padding: 1em; border: 1px solid #000}
div {
-webkit-box-sixing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#question {
position: absolute;
top: 44%;
left: 37%;
bottom: 50%;
color: red;
width: 30%;
height: 5%;
background-color: #fff;
border: 3px solid black;
text-align: center;
font-size: 24px;
border-radius: 30px;
}
#square1 {
position: absolute;
top: 20%;
left: 20%;
color: #fff;
font-weight: bold;
font-size: 24px;
}
#square2 {
position: absolute;
top: 20%;
left: 70%;
color: #fff;
font-weight: bold;
font-size: 24px;
}
#square3 {
position: absolute;
top: 70%;
left: 20%;
color: #fff;
font-weight: bold;
font-size: 24px;
}
#square4 {
position: absolute;
top: 70%;
left: 70%;
color: #fff;
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body>
<!-- the divs that the jQuery acts on -->
<div onclick="change_color(1)" id="div_color_1" class="nw change_color" style="background-color: rgb(224, 216, 200);">
</div>
<div onclick="change_color(2)" id="div_color_2" class="ne change_color" style="background-color: rgb(94, 198, 49);">
</div>
<div onclick="change_color(3)" id="div_color_3" class="sw change_color" style="background-color: rgb(84, 51, 38);">
</div>
<div onclick="change_color(4)" id="div_color_4" class="se change_color" style="background-color: rgb(169, 215, 220);">
</div>
<!-- Random me button that selects a random color for each square -->
<input id="question" type="button" onclick="colorfy_me()" value="Random me">
<!-- the squares -->
<p id="square1">Square 1</p>
<p id="square2">>Square 2</p>
<p id="square3">>Square 3</p>
<p id="square4">>Square 4</p>
<!-- jQuery scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var myColors = [
'#7F8C8D', '#95A5A6', '#BDC3C7', '#003946', '#BDC3C7',
'#ECF0F1', '#BDC3C7', '#ECF0F1', '#C0392B', '#E74C3C',
'#D35400', '#E67E22', '#F39C12', '#F1C40F', '#22313f',
'#2C3E50', '#34495E', '#8E44AD', '#9B59B6', '#2980B9',
'#3498DB', '#27AE60', '#2ECC71', '#16A085'
];
$(function(){
$.each(myColors, function(i, v){
$('#div_color' + (+i + 1)).css('background-color', v);
})
})
function colorfy_me() {
var colors = {};
$.each(myColors, function(i, v){
colors[i] = 0;
})
$('div.change_color').each(function() {
var color = Math.floor(Math.random() * myColors.length);
$(this).css('background-color', myColors[color]);
colors[color] = colors[color] + 1;
});
$.each(colors, function(i, v){
$('#div_color' + (+i + 1)).html(colors[i])
});
}
</script>
</body>
</html>
最佳答案
这个版本的 color_me 实现了 alexmac 试图描述的算法。它从副本中删除每种颜色，以便缩小的颜色数组仅包含未使用的颜色。
colorfy_me = function() {
var colors = myColors.slice(0)
$('div.change_color').each(function() {
// find a random color that's not already used.
var color = Math.floor(Math.random() * colors.length);
$(this).css('background-color', colors[color]);
$(this).html( colors[color] )
colors = colors.slice(0,color-1).concat(
colors.slice(color+1,colors.length-1) )
});
$.each(colors, function(i, v){
$('#div_color_' + (+i + 1)).html(colors[i])
});
}
您的代码还有一些其他问题，因此我不得不进行一些更改。请参阅 http://jsfiddle.net/cQB38/1/ 上的工作示例
只定义唯一的颜色，这比较棘手。一种选择是将您的颜色分成 4 组相似的颜色，然后从这 4 组中的每组中随机抽取一种颜色。我认为根据比较它们各自的红色、绿色和蓝色分量之间的差异和总和，可能可以确定两种颜色的不同程度，但这听起来很复杂。
关于javascript - 随机颜色 jquery 框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22187227/