اليوم ، عندما كنت في مؤسسة ، اضطررت إلى عرض الألوان على مستويات مختلفة. اضطررت إلى الحساب لفترة طويلة ولكن لم أتمكن من معرفة طريقة التدرج الملون. كان دائما يتوهم وقبيح. لذلك راجعت ذلك ووجدت رمز JS وجربته. كانت مثالية!
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body> <script src = "js/jquery -11.1.3.js"> </script> src = "js/swiper-33.3.1.jquery.min.js"> </script> <script type = "text/javaScript"> // startColor: بدء تشغيل اللون // endcolor: end color hex // الخطوة: عدة مستويات) 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 ؛ // total react sg = (endg-startg)/step ؛ sb = (endb-startb)/الخطوة ؛ 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 = "#" ؛ لـ (var i = 1 ؛ i <4 ؛ i+= 1) {scolornew+= scolor.slice (i ، i+1) .concat (scolor.slice (i ، i+1)) ؛ } scolor = scolornew ؛ } // معالجة قيم الألوان المكونة من ستة أرقام var scolorchange = [] ؛ لـ (var i = 1 ؛ i <7 ؛ i+= 2) {scolorchange.push (parseint ("0x"+scolor.slice (i ، i+2))) ؛ } إرجاع scolorchange ؛ } آخر {return scolor ؛ }} ؛ // تحويل تمثيل RGB إلى تمثيل Hex GradientColor.Prototype.colorHex = الدالة (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 = "#" ؛ لـ (var i = 0 ؛ i <acolor.length ؛ i ++) {var hex = number (acolor [i]). toString (16) ؛ Hex = Hex <10؟ 0+''+hex: hex ؛ // تأكد من أن قيمة كل rgb 2 بت إذا (hex === "0") {hex+= hex ؛ } strhex += hex ؛ } if (strhex.length! == 7) {strhex = _this ؛ } إرجاع strhex ؛ } آخر إذا (reg.test (_this)) {var anum = _this.replace (/#/، ""). split ("") ؛ if (anum.length === 6) {return _this ؛ } آخر إذا (anum.length === 3) {var numHex = "#" ؛ لـ (var i = 0 ؛ i <anum.length ؛ i+= 1) {numHex+= (anum [i]+anum [i]) ؛ } إرجاع numhex ؛ }} آخر {return _this ؛ }} var gradient = new GradientColor ('#e82400' ، '#8ae800' ، 10) ؛ console.log (التدرج) ؛ // تنبيه إخراج وحدة التحكم (التدرج) ؛ لـ (var i = 0 ؛ i <radient.length ؛ i ++) {var htmls = '<viv>'+i+'</viv>' ؛ $ ("الجسم"). إلحاق (HTMLS) ؛ console.log ($ ("mmm"+i)) ؛ console.log (التدرج [i]) ؛ $ (". mmm"+i) .css ("background-color" ، التدرج [i]) ؛ } </script> </body> </html>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.