Hoy, cuando estaba en una organización, tuve que mostrar colores en diferentes niveles. Tuve que calcular durante mucho tiempo, pero no pude entender el método de gradiente de color. Siempre fue elegante y feo. Así que lo revisé y encontré un código JS y lo probé. ¡Fue perfecto!
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body> <script src = "js/jQuery-1.11.3.js"> </script> <script src = "js/swiper-3.3.1.jquery.min.min.js" </script " type = "text/javascript">/ * // startColor: start color hex // endcolor: end color hex // paso: varios niveles (varios pasos) */function gradiente (startColor, endcolor, step) {startrgb = this.colorgb (startColor); // Convert a rgb en modo array startr = startrgbb [0]; startg = starTrgb [1]; startb = starTrgb [2]; endrgb = this.colorrgb (endcolor); endr = endrgb [0]; endg = endrgb [1]; endb = endrgb [2]; sr = (endr-startr)/step; // diferencia total sg = (endg-startg)/step; sb = (endb-startb)/step; var colorarr = []; para (var i = 0; i <step; i ++) {// Calcule el valor hexadecimal de cada paso var hex = this.colorHex ('rgb ('+parseInt ((sr*i+startr))+','+parseInt ((sg*i+startg))+','+parseInt ((sb*i+startb))+')'); colorarr.push (hex); } return colorarr; } // Convierta la representación HEX a la representación RGB (return el patrón de matriz RGB aquí) gradiente de gradiente.prototype.colorrgb = function (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 = "#"; para (var i = 1; i <4; i+= 1) {scolornew+= scolor.slice (i, i+1) .color.slice (i, i+1)); } scolor = scolornew; } // procesar valores de color de seis dígitos var scolorchange = []; para (var i = 1; i <7; i+= 2) {scolorchange.push (parseInt ("0x"+scolor.slice (i, i+2))); } return scolorChange; } else {return scolor; }}; // Convertir la representación RGB en representación HEX gradiente de gradiente.prototype.colorhex = function (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 = number (acolor [i]). toString (16); hex = hex <10? 0+''+hex: hex; // Asegúrese de que el valor de cada RGB sea de 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 = "#"; for (var i = 0; i <anum.length; i+= 1) {numhex+= (anum [i]+anum [i]); } return numhex; }} else {return _this; }} var de gradiente = new GradientColor ('#E82400', '#8AE800', 10); console.log (gradiente); // alerta de salida de consola (gradiente); for (var i = 0; i <gradiente.length; i ++) {var htmls = '<div>'+i+'</div>'; $ ("cuerpo"). append (htmls); console.log ($ ("mmm"+i)); console.log (gradiente [i]); $ (". mmm"+i) .css ("color de fondo", gradiente [i]); } </script> </body> </html>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.