Heute, als ich in einer Organisation war, musste ich Farben auf verschiedenen Ebenen anzeigen. Ich musste für eine lange Zeit berechnen, konnte aber die Farbgradientenmethode nicht herausfinden. Es war immer schick und hässlich. Also habe ich es überprüft und einen JS -Code gefunden und es ausprobiert. Es war perfekt!
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body> <script src = "js/jQuery.11.11.3.js" type = "text/javaScript">/ * // startColor: start farb hex // endColor: Endfarbenhex // Schritt: Mehrere Ebenen (mehrere Schritte) */FunktionsgradientColor (startColor, endColor, Step) {startrgb = this.colorrgb (startColor); startg = startergb [1]; startb = startergb [2]; endrgb = this.colorrgb (endColor); endr = endrgb [0]; Endg = endrgb [1]; endb = endrgb [2]; sr = (endr-start)/step; // Gesamtdifferenz SG = (endg-startg)/step; SB = (Endb-Startb)/Schritt; var colorarr = []; für (var i = 0; i <Schritt; i ++) {// Berechnen Sie den HEX -Wert jedes Schritts var hex = this.colorhex ('rgb ('+parseInt ((sr*i+starter))+','+parseInt ((sg*i+startg)), '+ParseInt (Sb*i+)+); colorarr.push (hex); } return colorarr; } // Die HEX-Darstellung in die RGB-Darstellung konvertieren (Rückgabe des RGB-Array-Musters hier) GradientColor.Prototype.Colorrgb = Funktion (scolor) {var reg = /^#([0-9a-fa-f] {3} | [0-9a-fa-f] {6}) $ /; var scolor = scolor.tolowerCase (); if (scolor && reg.test (scolor)) {if (scolor.length === 4) {var scolornew = "#"; für (var i = 1; i <4; i+= 1) {scolornew+= scolor.slice (i, i+1) .concat (scolor.lice (i, i+1)); } scolor = scolornew; } // Sechs-Tage-Farbwerte verarbeiten var scolorchange = []; für (var i = 1; i <7; i+= 2) {scolorchange.push (parseInt ("0x"+scolor.slice (i, i+2))); } return scolorchange; } else {return scolor; }}; // Die RGB -Darstellung in die HEX -RepräsentationsgradientColor.Prototype.Colorhex = Funktion (RGB) {var _this = rgb; var reg = /^#([0-9a-fa-f] {3} | [0-9a-fa-f] {6}) $ /; if (/^(rgb | rgb)/. test (_this)) {var acolor = _this.replace (/(? :( |) | rgb | rgb)*/g, ""). split (",", "); var strhex = "#"; für (var i = 0; i <acolor.length; i ++) {var hex = nummer (acolor [i]). tostring (16); hex = hex <10? 0+''+hex: hex; // Stellen Sie sicher, dass der Wert jedes RGB 2-Bit ist, wenn (hex === "0") {hex+= hex; } strhex += hex; } if (strhex.length! == 7) {strhex = _this; } return Strhex; } else if (reg.test (_this)) {var anum = _this.replace (/#/, ""). Split (""); if (anum.length === 6) {return _this; } else if (anum.length === 3) {var numhex = "#"; für (var i = 0; i <anum.length; i+= 1) {numhex+= (anum [i]+anum [i]); } return numhex; }} else {return _this; }} var gradient = new GradientColor ('#e82400', '#8ae800', 10); console.log (gradienten); // Konsolenausgangs -Alarm (Gradient); für (var i = 0; i <gradient.length; i ++) {var htmls = '<div>'+i+'</div>'; $ ("Körper"). Anhänge (HTMLS); console.log ($ ("mmm"+i)); console.log (gradienten [i]); $ (". Mmm"+i) .css ("Hintergrundfarbe", Gradient [i]); } </script> </body> </html>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.