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

使用jQuery每4秒显示3种随机颜色,jquery,random,setinterval,Jquery,Random,Setinterval,我有这段代码,我试图一次显示一个数组中的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) =&

我有这段代码,我试图一次显示一个数组中的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
}
//设置颜色
var颜色=[“白色”、“红色”、“蓝色”、“黄色”、“橙色”、“棕色”、“黑色”、“紫色”、“紫色”、“粉色”、“绿色”];
//随机挑选3个
变量三种随机颜色=(n)=>{
返回颜色。减少((备注、val、索引)=>{
var p=(n-memo.length);//还有多少可供选择。
var q=colors.length-index;//还有多少可供选择。
if(Math.random()

您的问题是
更改功能一次只输出一种颜色。您可以将其简化为仅输出(例如)

您将看到所有三种颜色:

//设置颜色
var颜色=[“白色”、“红色”、“蓝色”、“黄色”、“橙色”、“棕色”、“黑色”、“紫色”、“紫色”、“粉色”、“绿色”];
//随机挑选3个
变量三种随机颜色=(n)=>{
返回颜色。减少((备注、val、索引)=>{
var p=(n-memo.length);//还剩下多少个可供选择。
var q=colors.length-index;//还有多少可供选择。
if(Math.random()

elem.innerHTML=text.join(“”);//在div上,添加内容您可以非常简单地使用,并且此代码将在第一次运行时立即执行-然后每四秒钟执行一次,并且在同一个三色集中,它不会重复同一颜色多次。我所做的就是使用的

randoSequence
函数,前三个该数组中的值,使用
.value
将它们转换为原始值(因为randojs实际上返回一个对象数组,以防需要使用
.index
访问该值的原始索引),这些值组合成一个字符串,并将它们粘贴到
#color
的innerHTML中

函数showtrandomColor(){
var颜色=[“白色”、“红色”、“蓝色”、“黄色”、“橙色”、“棕色”、“黑色”、“紫色”、“紫色”、“粉色”、“绿色”];
document.querySelector(“#colors”).innerHTML=randoSequence(colors).slice(0,3).map(i=>i.value).join(“”);
}
显示随机颜色();
设置间隔(ShowRandomColor,4000);

@Peanuts别担心-我很高兴能帮上忙。
text.join(' ')