오늘 저는 조직에있을 때 색상을 다른 수준으로 표시해야했습니다. 오랫동안 계산해야했지만 색상 구배 방법을 알 수 없었습니다. 항상 화려하고 못 생겼습니다. 그래서 나는 그것을 확인하고 JS 코드를 찾아 시도했습니다. 완벽했습니다!
<! 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.js"> </script> <script type = "text/javaScript">//startColor : start color hex // endcolor : end color 16 진수 // 단계 : 몇 단계 (몇 단계) */기능 GradientColor (StartColor, endcolor, startb =) 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)/단계; var colorarr = []; for (var i = 0; i <step; i ++) {// 각 단계의 16 진수 값을 계산합니다 var hex = this.colorHex ( 'rgb ('+parseint ((sr*i+startr)))+','+parseint ((sg*i+startg))+','+parseint ((sb*i+startb)))); colorarr.push (hex); } return 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; } // 프로세스 6 자리 색상 값 var scolorchange = []; for (var i = 1; i <7; i+= 2) {scolorchange.push (parseint ( "0x"+scolor.slice (i, i+2))); } return scolorChange; } else {return scolor; }}; // RGB 표현을 16 진수로 변환 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); 16 진수 = hex <10? 0+''+hex : hex; // 각 RGB의 값이 2 비트 인 경우 (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 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 (그라디언트 [I]); $ ( ". mmm"+i) .css ( "배경색", 그라디언트 [i]); } </script> </body> </html>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.