数组中没有重复的颜色

Question

学习 JavaScript 并需要一些建议。我有一段简单的代码，可以在单击元素时更改元素的颜色，但我不希望在 onclick 事件上从数组中重复颜色。我将如何做到这一点或帮助学习什么是最被接受的做到这一点的方式。

尝试使用 IF 语句。

var colors = ["red", "blue", "green", "orange", "purple", "pink"];

document.querySelector('.circle').onclick = function changeColor() {
    var rand = colors[Math.floor(Math.random() * colors.length)];
    document.querySelector('.circle').style.color = rand; 

     console.log(rand);

    }

我希望颜色会改变但不会重复。

Answer 1

首先随机打乱数组，然后每次单击时单步遍历数组

var colors = ["red", "blue", "green", "orange", "purple", "pink"].sort(() => Math.random() - 0.5);
var i = 0;
document.querySelector('.circle').onclick = function changeColor() {
    var rand = colors[(i++)%colors.length];
    document.querySelector('.circle').style.backgroundColor = rand; 

     console.log(rand);

}

.circle{
    width:20px;
    height:20px;
    border: 1px solid black
}

<div class="circle"></div>

这只是不断循环相同的随机数组，如果您愿意，您可以选择在到达末尾时重新洗牌。