延迟切换文本颜色

Switch Text Color with Delay

本文关键字：颜色 文本 延迟      更新时间：2023-09-26

我正在尝试通过超时更改文本的颜色。就像每 5 秒一样，颜色应该改变一次。我只是无法让它工作。我做错了什么？

var rainBowColors = new Array();
rainBowColors.push("#FF0000"); //Red: #FF0000 
rainBowColors.push("#FF7F00"); //Orange: #FF7F00 
rainBowColors.push("#FFFF00"); //Yellow: #FFFF00 
rainBowColors.push("#00FF00"); //Green: #00FF00 
rainBowColors.push("#0000FF"); //Blue: #0000FF 
rainBowColors.push("#4B0082"); //Indigo: #4B0082 
rainBowColors.push("#8F00FF"); //Violet: #8F00FF  
var rainbowCounter = 0;
for (var counter = 0; counter < 1000; counter++) 
{
    //Easter :)
    //var timeOut = setTimeOut(function(){
    jQuery(".text").css("color", rainBowColors[rainbowCounter]);
    //}, 500);
    //clearTimeOut(timeOut);
    //Higher Counter
    rainbowCounter++;
    //Reset counter
    if (rainbowCounter == rainBowColors.length) 
    {
        rainbowCounter = 0;
    }
}

完整示例：http://jsfiddle.net/xLS25/

回答你的问题：在你的代码中，颜色确实会改变，只是为了快速让眼睛看到。循环以非常快的方式运行所有 1000 次迭代，每次迭代都会执行超时(也非常快(，这反过来又使它们似乎同时解析(太快了，肉眼看不到(。最重要的是，如果以这种方式触发，您的计时器由于其异步性质而并行滴答作响，您正在寻找的是计时器一个接一个地按顺序启动。希望这是有道理的

尝试使用 setInterval 而不是超时

var rainBowColors = new Array();
rainBowColors.push("#FF0000"); //Red: #FF0000 
rainBowColors.push("#FF7F00"); //Orange: #FF7F00 
rainBowColors.push("#FFFF00"); //Yellow: #FFFF00 
rainBowColors.push("#00FF00"); //Green: #00FF00 
rainBowColors.push("#0000FF"); //Blue: #0000FF 
rainBowColors.push("#4B0082"); //Indigo: #4B0082 
rainBowColors.push("#8F00FF"); //Violet: #8F00FF  
var rainbowCounter = 0;
var interval = setInterval(function(){
    jQuery(".text").css("color", rainBowColors[rainbowCounter]);
    rainbowCounter++;
    //Reset counter
    if (rainbowCounter == rainBowColors.length) 
    {
        rainbowCounter = 0;
    }
},100);

http://jsfiddle.net/xLS25/2/

附言这个数组声明与你的相同，但更简洁一些。您可能希望改用它：

var rainBowColors = [
    "#FF0000", //Red
    "#FF7F00", //Orange
    "#FFFF00" //Yellow
    // ... add other colors
];

试试这个 

setInterval(function(){
    jQuery(".text").css("color", rainBowColors[rainbowCounter]);
    rainbowCounter++;
    //Reset counter
    if (rainbowCounter == rainBowColors.length) 
    {
        rainbowCounter = 0;
    }
},500);

var rainBowColors = new Array(); 
rainBowColors =["#FF0000","#FF7F00","#FFFF00","#00FF00","#0000FF","#4B0082","#8F00FF"];
var rainbowCounter = 0;
function changeColor(){
    $(".text").css("color", rainBowColors[rainbowCounter]);

}
setInterval(function(){
        if (rainbowCounter != rainBowColors.length) 
        {
            rainbowCounter++;
            changeColor();
        }
        else{
            rainbowCounter = 0;
            changeColor();
        }
    }, 500);
相关文章：