1

私はJavaで動作するコードを実装しようとしています。コードは、RGBを取得し、配列に基づいて次の色にフェードインし、JavaScriptが理解できるようにRGBを16進数に変更します。（私は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
4

1 に答える 1

2

これが目を見張るようなものに過ぎないと仮定すると、ブラウザのサポートは大きな問題ではありません。その場合、IE 9以下を除くすべてで以下が機能します（ただし、IE 10では機能します）。

CSS：

#bodyColor {
    animation: holyfuckrainbows 10s linear;
    -webkit-animation: holyfuckrainbows 10s linear;
}
@keyframes holyfuckrainbows {
    0% {background-color:#f00}
    16% {background-color:#f80}
    33% {background-color:#ff0}
    50% {background-color:#0f0}
    66% {background-color:#00f}
    83% {background-color:#70f}
    100% {background-color:#90f}
}
@-webkit-keyframes holyfuckrainbows {
    0% {background-color:#f00}
    16% {background-color:#f80}
    33% {background-color:#ff0}
    50% {background-color:#0f0}
    66% {background-color:#00f}
    83% {background-color:#70f}
    100% {background-color:#90f}
}

JavaScriptは必要ありません。必要に応じて10を調整して、虹の持続時間を長くしたり短くしたりします。

ループする必要がある場合は、infiniteの後に追加することで行うことができます10s。

于 2013-03-02T01:40:22.953 に答える