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

Question

我有这段代码，我试图从一个数组中显示 3 种随机颜色，一次，每 4 秒一次，但我每 4 秒得到一种颜色，即使它们被适当地随机化...

我错过了什么？

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

你的问题是你的 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>

Answer 2

您可以非常简单地完成此操作，将 randojs.com, and this code will execute immediately for the first run- then every four seconds thereafter, and it will never repeat the same color more than once within the same three-color set. All I do is make a shuffled color array using randojs's randoSequence function, slice the first three values from that array, map them to their raw values with .value (because randojs actually returns an array of objects in case you need to access the value's original index with .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>

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

Show 3 random colors at once every 4 seconds with jQuery

random

jquery

setinterval