如何在 Javascript 中生成彩虹色文本？

Question

我需要一个简单的 javascript 彩虹函数。

Answer 1

Solution 1: Javascript + HSL

this should be working in any browser

 window.addEventListener("load", function() { var elements = document.getElementsByClassName("rainbowText"); for (let i = 0; i < elements.length; i++) { generateRainbowText(elements[i]); } }); function generateRainbowText(element) { var text = element.innerText; element.innerHTML = ""; for (let i = 0; i < text.length; i++) { let charElem = document.createElement("span"); charElem.style.color = "hsl(" + (360 * i / text.length) + ",80%,50%)"; charElem.innerHTML = text[i]; element.appendChild(charElem); } }

 p { font-size: 2em; font-weight: 500; }

 <p class="rainbowText">This is an awesome text</p>

Solution 2: background-clip + linear-gradient

This is a webkit only answer (Chrome) but should be more efficient.

Update (01/2021): This is supported by modern browsers.

For compatibility list, check background-clip: text (including those with only -webkit- prefix support) here (MDN)

 let nb_stops = 10; // 10 color stops should be enough let dir = "left"; // left, right, top, bottom function SetupRainbow() { var rainbowStr = GetRainbowString(nb_stops, 80, 50); var oppositeDir = (dir==="left"?"right":(dir==="right"?"left":(dir==="top"?"bottom":"top"))); var css = '.rainbowText {\\ background-clip: text;\\ color: transparent;\\ -webkit-background-clip: text;\\ -webkit-text-fill-color: transparent;\\ background-image: -webkit-linear-gradient(' + dir + ',' + rainbowStr + '); \\ background-image: linear-gradient(to ' + oppositeDir + ',' + rainbowStr + ') \\ }' var style = document.createElement("style"); style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } document.head.appendChild(style); } // function that generate the rainbow string function GetRainbowString(nbStops, saturation, luminosity) { let gap = 360 / nbStops, colors = []; for (let i = 0; i < nbStops; i++) { colors.push("hsl(" + (i * gap) + "," + saturation + "%," + luminosity + "%)"); } return colors.join(); } window.addEventListener("load", function() { SetupRainbow(); });

 span { font-size: 2em; font-weight: 500; }

 <span class="rainbowText">This is an awesome text</span>

Answer 2

It depends on what kind of rainbow text do you want. Some rainbow styles are really elegant.

Here are few :-

1. A pen from codepen .
2. Another pen here .
3. animated rainbow text at jsfiddle .

<div class="rainbow-text">Words and things</div>

@keyframes rainbow-text {
  0% {
    color: #e87d7d;
  }
  2% {
    color: #e88a7d;
  }
  4% {
    color: #e8977d;
  }
  6% {
    color: #e8a47d;
  }
  8% {
    color: #e8b07d;
  }
  10% {
    color: #e8bd7d;
  }
  12% {
    color: #e8ca7d;
  }
  14% {
    color: #e8d77d;
  }
  16% {
    color: #e8e47d;
  }
  18% {
    color: #dfe87d;
  }
  20% {
    color: #d3e87d;
  }
  22% {
    color: #c6e87d;
  }
  24% {
    color: #b9e87d;
  }
  26% {
    color: #ace87d;
  }
  28% {
    color: #9fe87d;
  }
  30% {
    color: #92e87d;
  }
  32% {
    color: #86e87d;
  }
  34% {
    color: #7de881;
  }
  36% {
    color: #7de88e;
  }
  38% {
    color: #7de89b;
  }
  40% {
    color: #7de8a8;
  }
  42% {
    color: #7de8b5;
  }
  44% {
    color: #7de8c1;
  }
  46% {
    color: #7de8ce;
  }
  48% {
    color: #7de8db;
  }
  50% {
    color: #7de8e8;
  }
  52% {
    color: #7ddbe8;
  }
  54% {
    color: #7dcee8;
  }
  56% {
    color: #7dc1e8;
  }
  58% {
    color: #7db5e8;
  }
  60% {
    color: #7da8e8;
  }
  62% {
    color: #7d9be8;
  }
  64% {
    color: #7d8ee8;
  }
  66% {
    color: #7d81e8;
  }
  68% {
    color: #867de8;
  }
  70% {
    color: #927de8;
  }
  72% {
    color: #9f7de8;
  }
  74% {
    color: #ac7de8;
  }
  76% {
    color: #b97de8;
  }
  78% {
    color: #c67de8;
  }
  80% {
    color: #d37de8;
  }
  82% {
    color: #df7de8;
  }
  84% {
    color: #e87de4;
  }
  86% {
    color: #e87dd7;
  }
  88% {
    color: #e87dca;
  }
  90% {
    color: #e87dbd;
  }
  92% {
    color: #e87db0;
  }
  94% {
    color: #e87da4;
  }
  96% {
    color: #e87d97;
  }
  98% {
    color: #e87d8a;
  }
  100% {
    color: #e87d7d;
  }
}
.rainbow-text {
  animation: rainbow-text 1s infinite;
}

Answer 3

I researched the same thing and came up with this:

 var css = 'body {animation-name:test; animation-duration:4s; animation-iteration-count:infinite; } @keyframes test{ 0%{color:#ff0000} 20%{color:#00ff00} 40%{color:#ffff00} 60%{color:#0000ff} 80%{color:#00ffff} 100%{color:#ff0000}', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);

 <p>WOO!<p>

This also works as a bookmarklet, with great results!

Answer 4

function rainbow(str) {
    var multiplier = 5;
    var result = "";
    for (var i = 0; i < str.length; i++) {
        result += "<font style='color: hsl(" + i * multiplier % 360 + ", 100%, 70%)'>";
        result += str.substr(i, 1);
        result += "</font>";
    }
    return result;
}

And it does the same in less time.

Answer 5

Pretty old question, but if anyone's still looking for a plain javascript ONLY answer to animated rainbow text (of which you can control direction and speed if you look hard enough through my spaghetti), here's my version: https://github.com/FeedbackFox/RGB-CSS-script

Working JSfiddle: https://jsfiddle.net/FeedbackFox/68ekobav/1/

//Script made by FeedbackFox. Please refrain from distributing this outside of github, but feel free to use it in whatever you want, whether commercial or non-commercial.
//https://github.com/FeedbackFox/RGB-CSS-script

(function(){
    let textspeed = 1;
    let backgroundspeed = 0.1;
    let hoverspeed = 10;
    let hoverbackgroundspeed = -1;

    let classestoberainbowed = document.getElementsByClassName('foxrainbow');
    let backgroundtoberainbowed = document.getElementsByClassName('foxrainbowbg');

    let spanstoberainbowed = spanArrayContents(classestoberainbowed);

    textcolorchange(spanstoberainbowed, textspeed);
    //Actually do the rainbow effect. Backgrounds only.
    let backgroundcounter = 0;
    setInterval(() => {

        for(let i = 0; i < backgroundtoberainbowed.length; i++) {
            backgroundtoberainbowed[i].style.backgroundColor = 'hsl(' + (backgroundcounter + Math.floor(i * 1)) + ', 100%, 70%';
        }
        backgroundcounter = backgroundcounter + backgroundspeed;
    }, 15);


    //Turn the rainbow effect on only when the mouse is over the element. Use foxrainbowhover to use.

    let rainbowhover = document.getElementsByClassName('foxrainbowhover');
    let invertedhover = document.getElementsByClassName('foxrainbowhoverinv');
    let rainbowelements = [];
    let rainbowinvelements = [];
    let hoverinterval = [];
    let hoverinvinterval = [];
    let hovercounters = [];
    let invcounters = [];
    let originalcolors = [];
    let originalinvcolors = [];

    for(let i = 0; i < rainbowhover.length; i++) {
        rainbowelements[i] = spanElementContents(rainbowhover[i]);
    }
    for(let i = 0; i < invertedhover.length; i++) {
        rainbowinvelements[i] = spanElementContents(invertedhover[i]);
    }



    //Set up the wavey effect with counters.
    for(let id = 0; id < rainbowelements.length; id++) {
        hovercounters[id] = [];
        for(let i = 0; i < rainbowelements[id].length; i++) {
            hovercounters[id].push(i);
        }
    }

    for(let id = 0; id < rainbowinvelements.length; id++) {
        invcounters[id] = [];
        for(let i = 0; i < rainbowinvelements[id].length; i++) {
            invcounters[id].push(i);
        }
    }

    //Save the original color to easily return to it later.
    for(let i = 0; i < rainbowhover.length; i++) {
        originalcolors[i] = rainbowhover[i].style.color;
    }

    // Add event listeners for every item classed foxrainbowhover. If it has a data tag called foxrainbowhover with an id inside it instead uses that to start the hover effect.
    for(let id = 0; id < rainbowhover.length; id++) {
        //Checks if the passed along id exists or not. If it doesn't, execute regularly. If it does, execute with hover on a different element.
        if(rainbowhover[id].dataset.foxrainbowhover) {
            let hoverelement = document.getElementById(rainbowhover[id].dataset.foxrainbowhover);

            hoverelement.addEventListener("mouseenter", function startanimation() {

                hoverinterval[id] = setInterval(() => {

                    for(let i = 0; i < rainbowelements[id].length; i++) {
                        rainbowelements[id][i].style.color = 'hsl(' + (hovercounters[id][i] + Math.floor(i * hoverspeed)) + ', 100%, 70%';
                        hovercounters[id][i]++;
                    }
                }, 7);
            }, false);

            hoverelement.addEventListener("mouseleave", function stopanimation() {
                console.log("gay1");
                clearInterval(hoverinterval[id]);
                for(let i = 0; i < rainbowelements[id].length; i++) {
                    rainbowelements[id][i].style.color = originalcolors[id];
                }
            }, false);

        }
        else {
            rainbowhover[id].addEventListener("mouseenter", function startanimation() {

                hoverinterval[id] = setInterval(() => {

                    for(let i = 0; i < rainbowelements[id].length; i++) {
                        rainbowelements[id][i].style.color = 'hsl(' + (hovercounters[id][i] + Math.floor(i * hoverspeed)) + ', 100%, 70%';
                        hovercounters[id][i]++;
                    }
                }, 7);
            }, false);

            rainbowhover[id].addEventListener("mouseleave", function stopanimation() {
                clearInterval(hoverinterval[id]);
                for(let i = 0; i < rainbowelements[id].length; i++) {
                    console.log("gay1");
                    rainbowelements[id][i].style.color = originalcolors[id];
                }
            }, false);
        }


    }









    //Same code as before. Will make it way DRY-er later, but for now, this'll have to do.

    for(let i = 0; i < invertedhover.length; i++) {
        originalinvcolors[i] = invertedhover[i].style.color;
    }

    let startinterval = [];

    // Add event listeners for every item classed foxrainbowhoverinv.
    for(let id = 0; id < invertedhover.length; id++) {

        startinterval[id] = setInterval(() => {

            for(let i = 0; i < rainbowinvelements[id].length; i++) {
                rainbowinvelements[id][i].style.color = 'hsl(' + (invcounters[id][i] + Math.floor(i * hoverspeed)) + ', 100%, 70%';
                invcounters[id][i]++;
            }
        }, 7);

        //Checks if the passed along id exists or not. If it doesn't, execute regularly. If it does, execute with hover on a different element.
        if(invertedhover[id].dataset.foxrainbowhover) {
            let hoverelement = document.getElementById(invertedhover[id].dataset.foxrainbowhover);

            hoverelement.addEventListener("mouseenter", function stopanimation() {
                clearInterval(startinterval[id]);
                clearInterval(hoverinvinterval[id]);
                for(let i = 0; i < rainbowinvelements[id].length; i++) {
                    rainbowinvelements[id][i].style.color = originalinvcolors[id];
                }

            }, false);

            hoverelement.addEventListener("mouseleave", function startanimation() {
                hoverinvinterval[id] = setInterval(() => {

                    for(let i = 0; i < rainbowinvelements[id].length; i++) {
                        rainbowinvelements[id][i].style.color = 'hsl(' + (invcounters[id][i] + Math.floor(i * hoverspeed)) + ', 100%, 70%';
                        invcounters[id][i]++;
                    }
                }, 7);
            }, false);

        }
        else {
            invertedhover[id].addEventListener("mouseenter", function stopanimation() {

                clearInterval(startinterval[id]);
                clearInterval(hoverinterval[id]);
                for(let i = 0; i < rainbowinvelements[id].length; i++) {
                    rainbowinvelements[id][i].style.color = originalinvcolors[id];
                }
            }, false);

            invertedhover[id].addEventListener("mouseleave", function startanimation() {
                hoverinterval[id] = setInterval(() => {

                    for(let i = 0; i < rainbowinvelements[id].length; i++) {
                        rainbowinvelements[id][i].style.color = 'hsl(' + (invcounters[id][i] + Math.floor(i * hoverspeed)) + ', 100%, 70%';
                        invcounters[id][i]++;
                    }
                }, 7);
            }, false);
        }


    }



        //Hover but for backgrounds.

        let rainbowhoverbg = document.getElementsByClassName('foxrainbowhoverbg');
        let hoverbginterval = [];
        let hoverbgcounter = 0;
        let originalbgcolors = [];

        //Save the original color to easily return to it later, but for backgrounds.
        for(let i = 0; i < rainbowhoverbg.length; i++) {
            originalbgcolors[i] = rainbowhoverbg[i].style.backgroundColor;
        }

        for(let id = 0; id < rainbowhoverbg.length; id++) {
            rainbowhoverbg[id].addEventListener("mouseenter", function startbganimation() {

                hoverbginterval[id] = setInterval(() => {
                        rainbowhoverbg[id].style.backgroundColor = 'hsl(' + (hoverbgcounter + Math.floor(id * hoverbackgroundspeed)) + ', 100%, 70%';
                        hoverbgcounter++;
                }, 15);
            }, false);

            rainbowhoverbg[id].addEventListener("mouseleave", function stopbganimation() {
                clearInterval(hoverbginterval[id]);
                rainbowhoverbg[id].style.backgroundColor = originalbgcolors[id];
            }, false); 
        }
})()


//Actually do the rainbow effect. Text only.
function textcolorchange(rainbowarray, rainbowspeed) {
    let counterarray = [];

    for(let i = 0; i < rainbowarray.length; i++) {
        counterarray[i] = 0 + i;
    }
    setInterval(() => {

        for(let i = 0; i < rainbowarray.length; i++) {
            rainbowarray[i].style.color = 'hsl(' + (counterarray[i] + Math.floor(i * rainbowspeed)) + ', 100%, 70%';
            if(counterarray[i] == 360)
            {
                counterarray[i] = 0;
            }
            else {
                counterarray[i]++;
            }
        }
    }, 7);
}


//Prepare text for having its color changed by splicing it up into individual bits
//and taking it out of the HTMLcollection.

function spanArrayContents(classes) {

    let spans = [];
    let chars = [];

    for(let i = 0; i < classes.length; i++) {
        chars.push(classes[i].innerText.split(""));
        classes[i].innerHTML = chars[i].map(function(char) {
            return '<span>' + char + "</span>";
        }).join('');

    }

    for(let i = 0; i < classes.length; i++) {
        let temphtmlcollection = [].slice.call(classes[i].children)
        for(let j = 0; j < temphtmlcollection.length; j++) {
             spans.push(temphtmlcollection[j]);
        }
    }
    return spans;
}

//Same as above except for single elements instead of an array of elements. 
//Helps split them up and give them an ID before they're taken to the slaughterhouse.

function spanElementContents(element) {
    let spans = [];
    let chars = [];

    chars.push(element.innerText.split(""));
    for(let i = 0; i < chars.length; i++){
        element.innerHTML = chars[i].map(function(char) {
            return '<span>' + char + "</span>";
        }).join('');
    }



    let temphtmlcollection = [].slice.call(element.children)
    for(let j = 0; j < temphtmlcollection.length; j++) {
         spans.push(temphtmlcollection[j]);
    }
    return spans;
}

Answer 6

 const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; var temp=document.getElementsByTagName('span'); for(let i=0;i<colors.length;i++){ temp[i].style.color=colors[i]; }

 <!DOCTYPE html> <head> <title>Rainbow</title> <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <h1> <span>R</span> <span>A</span> <span>I</span> <span>N</span> <span>B</span> <span>O</span> <span>W</span> </h1> </body> </html>

Answer 7

我需要普通javascript中的Rainbow函数。