使用 jQuery 每 4 秒一次显示 3 种随机颜色

Question

我有这段代码，我试图从一个数组中显示 3 种随机颜色，一次，每 4 秒一次，但是我每 4 秒得到 1 种颜色，即使它们是正确的随机...

我错过了什么？

//set colors
var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];

//pick 3 of them randomly
var three_random_colors = (n) => {
    return colors.reduce((memo, val, index) => {
        var p = (n-memo.length); // How many remaining to choose.
        var q = colors.length-index; // How many remaining to choose from.
        if (Math.random() < p/q){
            memo.push(val);
        }
        return memo;
    }, []);
};

//output the colors on the HTML
var counter = 0; //start counter
var elem = document.getElementById("changeText");//the place where we change things
setInterval(change, 4000);//every 4 seconds run the following stuff:
function change() {
 var text = three_random_colors(3);//get what's inside "three_random_colors"
 elem.innerHTML = text[counter];//on div, add content <--- (I want 3 at once here! but I get only 1)
    counter++;
    if(counter >= text.length) { counter = 0; var text = three_random_colors(3); }//reset
}

Answer 1

您可以使用randojs.com 非常简单地执行此操作，并且此代码将在第一次运行时立即执行 - 然后每四秒执行一次，并且在同一个三色组中它永远不会重复相同的颜色超过一次。我所做的只是使用randojs 的randoSequence 函数、slice 该数组中的前三个值、map 使用.value 将它们转换为原始值（因为randojs 实际上返回一个数组） objects 以防您需要使用 .index 访问值的原始索引），join 将这些值组合成一个字符串，并将它们粘贴到 #color 的 innerHTML 中。

function showRandomColors() {
  var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];
  document.querySelector("#colors").innerHTML = randoSequence(colors).slice(0, 3).map(i => i.value).join(" ");
}

showRandomColors();
setInterval(showRandomColors, 4000);

<script src="https://randojs.com/1.0.0.js"></script>
<div id="colors"></div>

就像我说的，这段代码使用randojs.com，所以如果你想使用这段代码，请确保你的html文档的head标签中有这个：

<script src="https://randojs.com/1.0.0.js"></script>

Answer 2

您的问题是您的 change 函数一次只输出一种颜色。您可以将其简化为仅输出（例如）

text.join(' ')

你会看到所有三种颜色：

//set colors
var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];

//pick 3 of them randomly
var three_random_colors = (n) => {
  return colors.reduce((memo, val, index) => {
    var p = (n - memo.length); // How many remaining to choose.
    var q = colors.length - index; // How many remaining to choose from.
    if (Math.random() < p / q) {
      memo.push(val);
    }
    return memo;
  }, []);
};

//output the colors on the HTML
var elem = document.getElementById("changeText"); //the place where we change things
setInterval(change, 4000); //every 4 seconds run the following stuff:
function change() {
  var text = three_random_colors(3); //get what's inside "three_random_colors"
  elem.innerHTML = text.join(' '); //on div, add content <--- (I want 3 at once here! but I get only 1)
}

<div id="changeText"></div>