如何随机改变JavaScript中的单词颜色？

Question

我已经创建了一个脚本，可以随机更改锚点上的列表项颜色。我的问题是，有时两个或更多的单词具有相同的颜色，我不希望这种情况发生。任何人都知道如何做到这一点？

我的代码：

＆＃13;

＆＃13;

$('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)]);
  });
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

工作小提琴：

my fiddle

Answer 1

您可以随机播放数组并使用array的{​​{1}}方法来获得您的独特性。 .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());
    });
  });
});

^{ps：从How to randomize (shuffle) a JavaScript array?}

中窃取的随机播放功能

Answer 2

最佳解决方案

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

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

...与......

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

如何运作

获得独特颜色的最有效方法是将the splice() method与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>

（另见this Fiddle）

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);
});