Aujourd'hui, quand j'étais dans une organisation, j'ai dû afficher les couleurs à différents niveaux. J'ai dû calculer pendant longtemps mais je n'ai pas pu comprendre la méthode du gradient de couleur. C'était toujours sophistiqué et moche. Je l'ai donc vérifié et trouvé un code JS et l'ai essayé. C'était parfait!
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <itle> </ title> </ head> <body> <script src = "js / jQuery-1.11.3.js"> </ script> <script src = "JS / swiper-3.3.1.jquery.min.Min.js"> </ swiper-3.3.1.jquers type = "text / javascript"> / * // startColor: Démarrer la couleur hex // endcolor: fin couleur hex // étape: plusieurs niveaux (plusieurs étapes) * / fonction gradientcolor (startColor, endcolor, step) {startrgb = this.colorrgb (startColor); // convertir dans le mode rgb startr startr = startrgb [0]; startg = startrgb [1]; startB = startrgb [2]; ENDRGB = this.colorrgb (EndColor); ENDR = ENDRGB [0]; endg = ENDRGB [1]; ENDB = ENDRGB [2]; sr = (ENDR-startr) / Step; // différence totale sg = (endg-startg) / Step; sb = (endb-startb) / Step; var colorarr = []; pour (var i = 0; i <Step; i ++) {// Calculez la valeur hexagonale de chaque étape var hex = this.colorhex ('rgb (' + parseInt ((sr * i + startr)) + ',' + parseInt ((sg * i + startg)) + ',' + parseInt (SB * i + startb)) + ')');););); colorarr.push (hex); } return colorarr; } // convertir la représentation hexadécimande en représentation RVB (renvoyez le modèle de tableau RVB ici) gradientcolor.prototype.colorrgb = fonction (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 scolorn = "#"; pour (var i = 1; i <4; i + = 1) {ScolorNew + = Scolor.slice (i, i + 1) .concat (scolor.slice (i, i + 1)); } Scolor = ScolorNW; } // traite les valeurs de couleur à six chiffres var scolorchange = []; pour (var i = 1; i <7; i + = 2) {scolorchange.push (parseInt ("0x" + scolor.slice (i, i + 2))); } return scolorchange; } else {return scolor; }}; // Convertir la représentation RGB en représentation hexadémique gradientcolor.prototype.colorhex = fonction (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 = "#"; for (var i = 0; i <acolor.length; i ++) {var hex = nombre (acolor [i]). toString (16); hex = hex <10? 0 + '' + hex: hex; // assurez-vous que la valeur de chaque RGB est 2 bits if (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 = "#"; pour (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 (gradient); // alerte de sortie de la console (gradient); for (var i = 0; i <gradient.length; i ++) {var htmls = '<div>' + i + '</div>'; $ ("corps"). Ajouter (htmls); console.log ($ ("mmm" + i)); console.log (gradient [i]); $ (". mmm" + i) .css ("fond-couleur", gradient [i]); } </ script> </ body> </html>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.