在此JSBIN demo ,您将看到以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
function createPallet(){
R = Array('00', '33', '66', '99', 'CC', 'FF');
G = Array('00', '33', '66', '99', 'CC', 'FF');
B = Array('00', '33', '66', '99', 'CC', 'FF');
pallet = [];
j = 0;
for (x = 0; x < R.length; x++){
for (y = 0; y < G.length; y++){
for (z = 0; z < B.length; z++){
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
return pallet;
}
</script>
</head>
<body>
<select style="width: 150px">
<script>
pallet = createPallet();
alert("Number of colors: "+pallet.length)
for (i = 0; i < pallet.length; i++){
document.write("<option style='background-color:"+pallet[i]+"' title='"+pallet[i]+"'> </option>");
}
</script>
</select>
</body>
</html>
我有 258 种颜色,但是在白色选项标题中显示的列表中有重复未定义的蓝色值 B
。我相信这是因为嵌套循环中出现了问题,我无法弄清楚。另一件事,我希望它返回 256 种颜色而不是 258 种颜色!我该如何解决这个问题?
最佳答案
我认为只有最内层的循环需要推送:
for (x = 0; x < R.length; x++){
for (y = 0; y < G.length; y++){
for (z = 0; z < B.length; z++){
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
}
}
或
for (x = 0; x < R.length; x++){
for (y = 0; y < G.length; y++){
for (z = 0; z < B.length; z++){
pallet.push("#"+R[x]+G[y]+B[z]);
}
}
}
计数应该是 216。6*6*6 = 216。未定义的值在那里是因为循环变量,例如 z
,在它最后一次退出循环时递增。因此,在循环完成后,您引用的变量此时的值将比数组的长度多 1,从而导致未定义的值。
更新 澄清
for (x = 0; x < R.length; x++){
for (y = 0; y < G.length; y++){
for (z = 0; z < B.length; z++){
pallet[j] = "#"+R[x]+G[y]+B[z];
j++;
}
//remove ==> pallet[j] = "#"+R[x]+G[y]+B[z];
//remove ==> j++;
}
//remove ==> pallet[j] = "#"+R[x]+G[y]+B[z];
//remove ==> j++;
}
关于javascript - 创建调色板列表循环问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23344809/