2012-02-16 64 views
0

我添加一个随机的背景颜色与此代码如何挑选颜色不会是相同的相邻

var hue = ['#2dafe9','#5feec3','#fdaf17','#999999','#2b2b2b','#454323','#ab34ef', '#e324e2','#874edf','#18edf4']; 
    function getHue(){ 
     return hue[Math.floor(Math.random() * hue.length)]; 
    } 

    function rainbow(){ 
     $("header[role='postHeader']").each(function(){ 
       $(this).css('background-color',getHue()); 
     }); 
    } 
    rainbow(); 

我的问题是,如何选择在阵列的顺序颜色,而不必以相同的颜色在结果中彼此相邻,所以颜色将遵循数组顺序,而如果它的最后一个数组循环返回到第一个。

+0

您可能想要随机性或序列。哪一个? – 2012-02-16 16:27:38

+0

顺序与数组顺序相同 – Warface 2012-02-16 16:28:22

+0

此外,“颜色”与这个问题无关,可以完全抽象出来。现在的问题是关于在序列数组访问的结果中增加某种语义(尚未由OP进行澄清)。即使Javascript并不严格相关; jQuery当然不是。 – 2012-02-16 16:28:49

回答

2
function getHue() { 
    var t = hue.shift(); 
    hue.push(t); 
    return t; 
} 

这需要第一个色相,将其放回到数组的末尾并返回它。

+0

Yup听起来不错。谢谢! – Warface 2012-02-16 16:30:08

+0

请注意,这种方法的效率远低于Andrew提到的方法,两次更改Array时实际只是想从中读取。 – copy 2012-02-16 16:40:31

+0

确实,但“彩虹”似乎是一次性使用功能。因此,性能差异是可以忽略的,除非页面上有四百亿个

。 – 2012-02-16 16:44:57

0

保持局部变量并遍历数组。

(function(){ 
    var idx = 0; 
    function getHue(){ 
    return hue[idx = idx++ % hue.length]; 
    } 
})(); 
+0

不要忘记实际将模数应用于变量。或者它最终会溢出。 – 2012-02-16 16:33:35