Сегодня, когда я был в организации, мне пришлось отображать цвета на разных уровнях. Я должен был рассчитать в течение длительного времени, но не мог понять метод градиента цветового градиента. Это всегда было причудливым и уродливым. Поэтому я проверил его, нашел код JS и попробовал. Это было прекрасно!
<! Doctype html> <html> <head lang = "en"> <meta charset = "UTF-8"> <Tite> </tit src = "js/swiper-3.3.1.jquery.min.js"> </script> <script type = "text/javascript">/ * // startcolor: start color hex // endcolor: end color hex // step: step strage (несколько шагов) */function gradientcolor (startcolor, endcolor, steptrg = steptr this.colorrgb (startcolor); // конвертировать в режим массива 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)/step; // общая разница sg = (endg-startg)/step; sb = (endb-startb)/step; var colorarr = []; для (var i = 0; i <step; i ++) {// вычислять шестнадцатеричное значение каждого шага var hex = this.colorhex ('rgb ('+parseint ((sr*i+startr))+','+parseint ((sg*i+startg))+','+parseint ((sb*i+startb)+'); colorarr.push (hex); } вернуть Colorarr; } // Конвертировать представление HEX в представление RGB (вернуть шаблон массива RGB здесь) gradientColor.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 = "#"; for (var i = 1; i <4; i+= 1) {scolornew+= scolor.slice (i, i+1) .concat (scolor.slice (i, i+1)); } scolor = scolornew; } // обрабатывать шестизначные значения цвета var scolorchange = []; for (var i = 1; i <7; i+= 2) {scolorchange.push (parseint ("0x"+scolor.slice (i, i+2))); } вернуть ScolorChange; } else {return scolor; }}; // преобразовать представление RGB в HEX -представление gradientColor.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; // Убедитесь, что значение каждого RGB составляет 2-битный 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]); } вернуть numHex; }} else {return _this; }} var Gradient = new GradientColor ('#E82400', '#8ae800', 10); console.log (gradient); // Консоль выходной оповещения (градиент); for (var i = 0; i <gradient.length; i ++) {var htmls = '<div>'+i+'</div>'; $ ("body"). Append (HTMLS); console.log ($ ("mmm"+i)); console.log (gradient [i]); $ (". Mmm"+i) .css ("фоновый цвет", градиент [i]); } </script> </body> </html>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.