Javascript 更改JSON数组中每个元素的颜色

我一直想弄明白这一点，似乎很容易，但出于某种原因，我就是搞不懂！所以我有一些HTML和普通的JS代码。它循环遍历几个单词并键入它们，然后删除它们。我希望每个单词以不同的颜色出现在屏幕上。例如：“狗”是红色，“猫”是蓝色，“猴子”是黄色。我曾尝试使用

JSON.parse

提取元素，但我觉得我走错了方向。以下是我目前的代码：

var TxtRotate=函数（el、旋转、周期）{
this.toRotate=toRotate；
this.el=el；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
var i=this.loopNum%this.toRotate.length；
var fullTxt=this.toRotate[i]；
如果（这是删除）{
this.txt=fullTxt.substring（0，this.txt.length-1）；
}否则{
this.txt=fullTxt.substring（0，this.txt.length+1）；
}
this.el.innerHTML=''+this.txt+''；
var=这个；
var delta=300-Math.random（）*100；
如果（this.isDeleting）{delta/=2；}
如果（！this.isDeleting&&this.txt===fullTxt）{
delta=这个周期；
this.isDeleting=true；
}else if（this.isDeleting&&this.txt==''）{
this.isDeleting=false；
这个.loopNum++；
δ=500；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
window.onload=函数（）{
var elements=document.getElementsByClassName（'txt-rotate'）；
有关（var i=0；i的详细信息，请参见代码段中的注释


//新参数
var TxtRotate=函数（el、旋转、周期、颜色）{
this.toRotate=toRotate；
this.el=el；
//新道具
这个颜色=颜色；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
var i=this.loopNum%this.toRotate.length；
var fullTxt=this.toRotate[i]；
//新var
var color=this.color；
如果（这是删除）{
this.txt=fullTxt.substring（0，this.txt.length-1）；
}否则{
this.txt=fullTxt.substring（0，this.txt.length+1）；
}
//新样式属性
this.el.innerHTML=`+this.txt+''；
var=这个；
var delta=300-Math.random（）*100；
如果（this.isDeleting）{delta/=2；}
如果（！this.isDeleting&&this.txt===fullTxt）{
delta=这个周期；
this.isDeleting=true；
}else if（this.isDeleting&&this.txt==''）{
this.isDeleting=false；
这个.loopNum++；
δ=500；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
window.onload=函数（）{
var elements=document.getElementsByClassName（'txt-rotate'）；
对于（var i=0；i
请参见代码段中的注释


//新参数
var TxtRotate=函数（el、旋转、周期、颜色）{
this.toRotate=toRotate；
this.el=el；
//新道具
这个颜色=颜色；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
var i=this.loopNum%this.toRotate.length；
var fullTxt=this.toRotate[i]；
//新var
var color=this.color；
如果（这是删除）{
this.txt=fullTxt.substring（0，this.txt.length-1）；
}否则{
this.txt=fullTxt.substring（0，this.txt.length+1）；
}
//新样式属性
this.el.innerHTML=`+this.txt+''；
var=这个；
var delta=300-Math.random（）*100；
如果（this.isDeleting）{delta/=2；}
如果（！this.isDeleting&&this.txt===fullTxt）{
delta=这个周期；
this.isDeleting=true；
}else if（this.isDeleting&&this.txt==''）{
this.isDeleting=false；
这个.loopNum++；
δ=500；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
window.onload=函数（）{
var elements=document.getElementsByClassName（'txt-rotate'）；
对于（var i=0；i
嗨，我正在研究这个问题，代码似乎在循环中输出和删除动物，所以，减去你想要的颜色，它似乎在解析动物名称，所以我认为你只需要在你的跨度的数据属性中输入颜色，然后输入一些代码来处理颜色（或者你想怎么做）。如果我误解了你的问题，请告诉我。嗨，我正在研究这个问题，代码似乎在循环中输出和删除动物，因此，减去你想要的颜色，它似乎在解析动物名称，所以我认为你只需要在你的span的数据属性中输入颜色，然后输入some代码来处理颜色（或者你想怎么做）。如果我误解了你的问题，请告诉我。