Hoje, quando eu estava em uma organização, tive que exibir cores em diferentes níveis. Eu tive que calcular por um longo tempo, mas não consegui descobrir o método do gradiente de cores. Sempre foi chique e feio. Então, verifiquei e encontrei um código JS e tentei. Foi perfeito!
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <titter> </titit> </ad Head> <body> <script src = "js/jQuery-1.11.3.js" </script> <script <script src="js/swiper-3.3.1.jquery.min.js"></script><script type="text/javascript"> /* // startColor: start color hex // endColor: end color hex // step: several levels (several steps) */ function gradientColor(startColor,endColor,step){ startRGB = this.colorrgb (startColor); // converte para o modo de matriz rgb 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)/etapa; // diferença total sg = (endg-startg)/step; sb = (endb-startB)/etapa; var colorarr = []; for(var i=0;i<step;i++){ //Calculate the hex value of each step var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')'); colorarr.push (hex); } retornar colorarr; } // Converte a representação hexadecimal na representação RGB (retorne o padrão de matriz RGB aqui) gradientecolor.prototype.colorrgb = function (scolor) {var reg = /^#([0-9a-fa-f] {3} | [0-9a-fa] {6}) $ /; var scolor = scolor.tolowercase (); if (scolor && reg.test (scolor)) {if (scolor.length === 4) {var scolornew = "#"; for (var i = 1; i <4; i+= 1) {scolornew+= scolor.slice (i, i+1) .Concat (scolor.slice (i, i+1)); } scolor = scolornew; } // Processar valores de cor de seis dígitos var scolorChange = []; for (var i = 1; i <7; i+= 2) {scolorchange.push (parseint ("0x"+scolor.slice (i, i+2))); } retornar ScolorChange; } else {return scolor; }}; // converte a representação RGB em representação hexadecimal gradientecolor.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 = número (acolor [i]). ToString (16); Hex = Hex <10? 0+''+Hex: Hex; // Verifique se o valor de cada RGB é de 2 bits if (hex === "0") {hex+= hex; } STRHEX += hexadecimal; } if (strhex.Length! == 7) {STRHEX = _This; } retornar strex; } 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]); } retornar numhex; }} else {return _This; }} var gradiente = new GradientColor ('#e82400', '#8ae800', 10); console.log (gradiente); // alerta de saída do console (gradiente); for (var i = 0; i <gradient.length; i ++) {var htmls = '<div>'+i+'</div>'; $ ("corpo"). Anexar (htmls); console.log ($ ("mmm"+i)); console.log (gradiente [i]); $ (". mmm"+i) .css ("cor de fundo", gradiente [i]); } </script> </body> </html>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.