Javascript背景色褪色RGB算法问题

我正在尝试实现一段在java中工作的代码，该代码采用RGB并根据数组淡入下一种颜色，然后将taht RGB更改为十六进制，以便javascript理解。（我确实更改了数组和变量以与javascript兼容）。。。然而，它似乎仍然不起作用。我试图排除故障并找到解决方案，但找不到任何解决方案。我注意到的问题是，蓝色似乎被忽略了，而绿色却被改变了。我认为设定点不知何故被设置为负数，尽管我不知道在哪里以及为什么。感谢您的帮助（如果代码和这段文字都有点长，那么很抱歉）

var-curColorHex；
var targetRGBVals=[]；
增值税；
var nextRainbowVal=[]；
nextRainbowVal[0]=255；
nextRainbowVal[1]=0；
nextRainbowVal[2]=0//红色
nextRainbowVal[3]=255；
nextRainbowVal[4]=165；
nextRainbowVal[5]=0//橙色
nextRainbowVal[6]=255；
nextRainbowVal[7]=255；
nextRainbowVal[8]=0//黄色的
nextRainbowVal[9]=0；
nextRainbowVal[10]=255
nextRainbowVal[11]=0//绿色
nextRainbowVal[12]=0；
nextRainbowVal[13]=0；
nextRainbowVal[14]=255//蓝色
nextRainbowVal[13]=111；
nextRainbowVal[14]=0；
nextRainbowVal[15]=255//靛蓝
nextRainbowVal[16]=143；
nextRainbowVal[17]=0；
nextRainbowVal[18]=255//紫罗兰色
var rgbVals=[]；
var curColor=[]；
var指数；
var等于=[]；
函数onPageLoad（）{//这是唯一针对我的问题的代码，而不是其他代码
颜色指数=0；
等于[0]=真；
等于[1]=真；
等于[2]=真；
rgbIncrement=1；//+1，因此增量不能等于0
curColor[0]=nextRainbowVal[0]；
curColor[1]=nextRainbowVal[1]；
curColor[2]=nextRainbowVal[2]；
setInterval（“backgroundChange（）；”，10）；
}//页面加载
函数backgroundChange（）{//all for循环被设置为3，因为RGB从不超过3个不同的变量（出错的可能性较小）
对于（var i=0；i假设这只不过是吸引眼球的东西，那么浏览器支持不是一个主要问题。如果是这样的话，那么除了IE 9和以下版本之外，以下内容都适用（但在IE 10中也适用）：

CSS:

#车身颜色{
动画：holyfuckrainbows 10秒线性；
-webkit动画：holyfuckrainbows 10s线性；
}
@关键帧holyfuckrainbows{
0%{背景色：#f00}
16%{背景色：#f80}
33%{背景色：#ff0}
50%{背景色：#0f0}
66%{背景色：#00f}
83%{背景色：#70f}
100%{背景色：#90f}
}
@-webkit关键帧holyfuckrainbows{
0%{背景色：#f00}
16%{背景色：#f80}
33%{背景色：#ff0}
50%{背景色：#0f0}
66%{背景色：#00f}
83%{背景色：#70f}
100%{背景色：#90f}
}

无需JavaScript。根据需要调整10秒以延长或缩短彩虹的持续时间

如果需要循环，可以通过在
10s
之后添加
infinite
来实现。无需将结果转换为十六进制。只需使用格式
…style.backgroundColor='rgb（'+curColor[0]+'，'+curColor[1]+'，'+curColor[2]+'））“；
我试图预先使用它，尽管javascript给了我一个错误。不过，谢谢，程序跳过蓝色值而改为绿色，这可能是哪里的错？（此时我只是好奇到底是怎么回事）我刚刚意识到我的问题…如果你没有看到数组的编号有误，那真的很尴尬
var curColorHex;
var targetRGBVals = [];
var rgbIncrement;
var nextRainbowVal = [];
    nextRainbowVal[0]=255;
    nextRainbowVal[1]=0;
    nextRainbowVal[2]=0;//RED

    nextRainbowVal[3]=255;
    nextRainbowVal[4]=165;
    nextRainbowVal[5]=0;//Orange

    nextRainbowVal[6]=255;
    nextRainbowVal[7]=255;
    nextRainbowVal[8]=0;//Yellow

    nextRainbowVal[9]=0;
    nextRainbowVal[10]=255
    nextRainbowVal[11]=0;//Green

    nextRainbowVal[12]=0;
    nextRainbowVal[13]=0;
    nextRainbowVal[14]=255;//Blue

    nextRainbowVal[13]=111;
    nextRainbowVal[14]=0;
    nextRainbowVal[15]=255;//Indigo

    nextRainbowVal[16]=143;
    nextRainbowVal[17]=0;
    nextRainbowVal[18]=255;//Violet

var rgbVals = [];
var curColor = [];
var colorIndex;
var equal = [];

function onPageLoad(){//this is only code specific to my problem, none of the other code
    colorIndex=0;
    equal[0]=true;
    equal[1]=true;
    equal[2]=true;

    rgbIncrement=1;//+1 so increment can't equal 0
    curColor[0]=nextRainbowVal[0];
    curColor[1]=nextRainbowVal[1];
    curColor[2]=nextRainbowVal[2];

    setInterval("backgroundChange();",10);

}//onPageLoad

function backgroundChange(){//all for loops are set to 3 because RGB never goes above 3 different variables (less chance of error)
    for(var i=0;i<3;i++){
    rgbVals[i]=curColor[i];
    }//for

    targetRGBVals[0] = nextRainbowVal[colorIndex];//Initializes the targetRGB val
    targetRGBVals[1] = nextRainbowVal[colorIndex+1];
    targetRGBVals[2] = nextRainbowVal[colorIndex+2];

    for(var i=0; i<3; i++){//for loop to see if it has reached target
        if(targetRGBVals[i] != rgbVals[i]){
            equal[i] = false;
        }//if
        else equal[i]=true;
    }//for

    if(equal[0]&&equal[1]&&equal[2]){//changes setpoints after the RGB vals have reached their target
        if(colorIndex>(nextRainbowVal.length-3)){//this keeps setting the color index to next color when the curColor is at target, if it gets to the last color, it resets at beginning of array
            colorIndex = 0;
        }//if

        for(var g = 0; g<targetRGBVals.length; g++){//this sets the next target RGB vals
            targetRGBVals[g] = nextRainbowVal[colorIndex+g];
        }//for

        colorIndex += 3;
    }//if

    for(var m = 0; m<rgbVals.length; m++){//this loop adds/subtracts from RGB vals by the increment, and also checks if the color is within the amount of the increment (so it doesn't bounce back and forth between colors)                        
        if((rgbVals[m] != targetRGBVals[m])&& !equal[m]){
            if((rgbVals[m]>=(targetRGBVals[m] - rgbIncrement))&&(rgbVals[m]<=(targetRGBVals[m] + rgbIncrement))) rgbVals[m] = targetRGBVals[m];
            else rgbVals[m] += targetRGBVals[m] > rgbVals[m] ? +rgbIncrement : -rgbIncrement;
            if(rgbVals[m]<0) rgbVals[m]=0;
        }//if
    }//for

    curColor = rgbVals;
    console.log(curColor);
    console.log(rgbToHex(curColor[0],curColor[1],curColor[2]));
    hexColor = rgbToHex(curColor[0],curColor[1],curColor[2]);
    document.getElementById("bodyColor").style.backgroundColor=hexColor;
}//backgroundChange

function componentToHex(c){
    console.log(c);
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}//componentToHex

function rgbToHex(r,g,b){
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}//rgbToHex