如何在JavaScript中随机更改单词颜色？

我制作了一个脚本，当它被随机点击时，它会改变锚点上列表项的颜色。我的问题是，有时两个或两个以上的词有相同的颜色，我不希望这种情况发生。有人知道怎么做吗

我的代码：

$（'a'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
变量颜色=['#0071bc'、'#ff00ff'、'#fcee21'、'#39B54A'、'#00A99D'、'#662D91']；
$（'li'）。每个（函数（）{
$（this.css（'color'，colors[Math.floor（Math.random（）*colors.length）]）；
});
})

测试1
测试2
测试3

更改颜色

您可以洗牌数组，并使用

数组

的

.pop（）

方法获得唯一性<代码>：）

$（函数（）{
函数洗牌（数组）{
var currentIndex=array.length，temporaryValue，randomIndex；
//虽然还有一些元素需要洗牌。。。
而（0！==currentIndex）{
//选择剩余的元素。。。
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
//并将其与当前元素交换。
临时值=数组[currentIndex]；
数组[currentIndex]=数组[randomIndex]；
数组[randomIndex]=临时值；
}
返回数组；
}
$（'a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
变量颜色=['#0071bc'、'#ff00ff'、'#fcee21'、'#39B54A'、'#00A99D'、'#662D91']；
颜色=洗牌（颜色）；
$（'li'）。每个（函数（）{
$（this.css（'color'，colors.pop（））；
});
});
});


测试1
测试2
测试3

更改颜色
您可以洗牌数组，并使用
数组
的
.pop（）
方法获得唯一性<代码>：）

$（函数（）{
函数洗牌（数组）{
var currentIndex=array.length，temporaryValue，randomIndex；
//虽然还有一些元素需要洗牌。。。
而（0！==currentIndex）{
//选择剩余的元素。。。
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
//并将其与当前元素交换。
临时值=数组[currentIndex]；
数组[currentIndex]=数组[randomIndex]；
数组[randomIndex]=临时值；
}
返回数组；
}
$（'a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
变量颜色=['#0071bc'、'#ff00ff'、'#fcee21'、'#39B54A'、'#00A99D'、'#662D91']；
颜色=洗牌（颜色）；
$（'li'）。每个（函数（）{
$（this.css（'color'，colors.pop（））；
});
});
});


测试1
测试2
测试3

更改颜色
最佳解决方案
您需要对现有代码进行的唯一更改是替换

$(this).css('color', colors[Math.floor(Math.random() * colors.length)]);

。。。与

$(this).css('color', colors.splice(Math.floor(Math.random() * colors.length), 1));


工作原理
获得独特颜色的最有效方法是与
Math.floor（Math.random（）*colors.length）
结合使用：


splice（）
方法允许您（1）在所选位置从
colors
数组中删除单个元素，以及（2）返回该元素
Math.floor（Math.random（）*colors.length）
允许您将该位置设置为随机位置

因为每次迭代只需要一个
循环和一个拼接操作，所以这种方法比的方法（先进行无序排列，然后从无序排列的数组中“弹出”一个元素）更有效

另一个优点是，它只需要很少的代码


演示

$（'a'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
变量颜色=['#0071bc'、'#ff00ff'、'#fcee21'、'#39B54A'、'#00A99D'、'#662D91']；
var指数，价值；
$（'li'）。每个（函数（）{
$（this.css（'color'，colors.splice（Math.floor（Math.random（）*colors.length），1））；
});
})


测试1
测试2
测试3

最佳解决方案
您需要对现有代码进行的唯一更改是替换

$(this).css('color', colors[Math.floor(Math.random() * colors.length)]);

。。。与

$(this).css('color', colors.splice(Math.floor(Math.random() * colors.length), 1));


工作原理
获得独特颜色的最有效方法是与
Math.floor（Math.random（）*colors.length）
结合使用：


splice（）
方法允许您（1）在所选位置从
colors
数组中删除单个元素，以及（2）返回该元素
Math.floor（Math.random（）*colors.length）
允许您将该位置设置为随机位置

因为每次迭代只需要一个
循环和一个拼接操作，所以这种方法比的方法（先进行无序排列，然后从无序排列的数组中“弹出”一个元素）更有效

另一个优点是，它只需要很少的代码


演示

$（'a'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
变量颜色=['#0071bc'、'#ff00ff'、'#fcee21'、'#39B54A'、'#00A99D'、'#662D91']；
var指数，价值；
$（'li'）。每个（函数（）{
$（this.css（'color'，colors.splice（Math.floor（Math.random（）*colors.length），1））；
});
})


测试1
测试2
测试3

洗牌数组，然后选择颜色。如果项目的数量小于颜色的数量，那么您将始终拥有唯一的color@elclanrs，抱歉，但我的案例中的项目数不一定小于颜色数。@Anonymous
抱歉，但是如果在我的例子中项目的数量不一定小于颜色的数量
，那么在没有足够的唯一颜色的情况下，如何为每个元素提供唯一的颜色？好的，谢谢。我会记住这一点，我会使用更多的颜色。再次感谢。@Anonymous即使在任何情况下，如果数量超过，您也可以在
array.pop（）
为
nul时创建数组的副本