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

Question

我制作了一个脚本，可以在随机单击时更改锚点上列表项的颜色。 我的问题是，有时两个或多个单词具有相同的颜色，我不希望这种情况发生。 有人对如何做有任何想法吗？

我的代码：

 $('a').on('click', function(e) { e.preventDefault(); var colors = ['#0071bc', '#ff00ff', '#fcee21', '#39B54A', '#00A99D', '#662D91']; $('li').each(function() { $(this).css('color', colors[Math.floor(Math.random() * colors.length)]); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Test 1</li> <li>Test 2</li> <li>Test 3</li> </ul> <a>Change color</a> 

工作中的小提琴：

我的小提琴

Answer 1

您可以改组数组，并使用array的.pop()方法来获得唯一性。 :)

 $(function () { function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } $('a').on('click', function(e) { e.preventDefault(); var colors = ['#0071bc', '#ff00ff', '#fcee21', '#39B54A', '#00A99D', '#662D91']; colors = shuffle(colors); $('li').each(function() { $(this).css('color', colors.pop()); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Test 1</li> <li>Test 2</li> <li>Test 3</li> </ul> <a>Change color</a> 

^{ps：随机播放功能从如何随机化（随机播放）JavaScript数组中被盗？}

Answer 2

最佳解决方案

您需要对现有代码进行的唯一更改是替换...

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

...与...

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

---

这个怎么运作

获得唯一颜色的最有效方法是将splice()方法与Math.floor(Math.random() * colors.length)结合使用：

• 通过splice()方法，您可以（1）从colors数组中选择一个位置删除单个元素，以及（2）返回该元素。
• Math.floor(Math.random() * colors.length)允许您将该位置设为随机位置。

因为每次迭代只需要一个for循环和一个拼接操作，所以这种方法比Praveen的方法（先执行洗牌，然后从洗牌数组中“弹出”一个元素）效率更高。

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

---

演示

 $('a').on('click', function(e) { e.preventDefault(); var colors = ['#0071bc', '#ff00ff', '#fcee21', '#39B54A', '#00A99D', '#662D91']; var index, value; $('li').each(function() { $(this).css('color', colors.splice(Math.floor(Math.random() * colors.length), 1)); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Test 1</li> <li>Test 2</li> <li>Test 3</li> </ul> <a href="#">Change color</a> 

（另请参阅此小提琴 ）

Answer 3

$(function() {
    count = 0;
    wordsArray = ["Stackover", "flow", "Rocks", "Nice"];
    setInterval(function() {
        count++;
        $("#word").fadeOut(400, function() {
            $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
        });
    }, 2000);
});