今日、私が組織にいたとき、私はさまざまなレベルで色を表示する必要がありました。私は長い間計算する必要がありましたが、色勾配法を把握できませんでした。それはいつも派手で醜いものでした。そこで、私はそれをチェックして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 hex // step：いくつかのレベル（いくつかのステップ） */function gradientcolor（startcolor、endcolor、step）{startrgb = this.colorrgb（startcolor）; 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 = []; for（var i = 0; i <step; i ++）{//各ステップのhex値を計算しますvar hex = this.colorhex（ '+parseint（（sr*i+startr）+'、 '+parseint（（sg*i+startg）+'+'+parseint）; colorarr.push（hex）; } colorarrを返します。 } //ヘックス表現を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）））; } 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、 ""）。分割（ "、"）; 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（ "background-color"、gradient [i]）; } </script> </body> </html>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。