วันนี้เมื่อฉันอยู่ในองค์กรฉันต้องแสดงสีในระดับที่แตกต่างกัน ฉันต้องคำนวณเป็นเวลานาน แต่ไม่สามารถหาวิธีการไล่ระดับสีได้ มันเป็นแฟนซีและน่าเกลียดเสมอ ดังนั้นฉันจึงตรวจสอบและพบรหัส JS และลองใช้ มันสมบูรณ์แบบ!
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body> <script src = "js/jQuery-1.11.3.js"> </script> type = "text/javascript">/ * // startColor: เริ่มสี hex // endcolor: จบสี hex // ขั้นตอน: หลายระดับ (หลายขั้นตอน) */ฟังก์ชั่นการไล่ระดับสี (startColor, endColor, ขั้นตอน) startg = startrgb [1]; startb = starttrgb [2]; endrgb = this.colorrgb (endcolor); endr = endrgb [0]; endg = endrgb [1]; endb = endrgb [2]; sr = (endr-startrtr)/step; // ความแตกต่างทั้งหมด sg = (endg-startg)/ขั้นตอน; sb = (endb-startb)/ขั้นตอน; var colorarr = []; สำหรับ (var i = 0; i <step; i ++) {// คำนวณค่า hex ของแต่ละขั้นตอน var hex = this.colorhex ('rgb ('+parseint ((sr*i+starttr))+','+parseint (sg*i+startg))+',' colorarr.push (hex); } return colorarr; } // แปลงการเป็นตัวแทน hex เป็นตัวแทน RGB (ส่งคืนรูปแบบอาร์เรย์ RGB ที่นี่) gradientColor.prototype.colorrgb = ฟังก์ชั่น (scolor) {var reg = /^#([0-9a-fa-f] {3} | [0-9a-fa-f] {6} $ /; var scolor = scolor.toLowercase (); if (scolor && reg.test (scolor)) {ถ้า (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))); } return 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)/. ทดสอบ (_this)) {var acolor = _this.replace (/(? :( |) | rgb | rgb)*/g, ""). แยก (","); 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; } return strhex; } อื่นถ้า (reg.test (_this)) {var anum = _this.replace (/#/, ""). แยก (""); if (anum.length === 6) {return _this; } อื่นถ้า (anum.length === 3) {var numhex = "#"; สำหรับ (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 (การไล่ระดับสี); // การแจ้งเตือนเอาต์พุตคอนโซล (การไล่ระดับสี); สำหรับ (var i = 0; i <gradient.length; i ++) {var htmls = '<div>'+i+'</div>'; $ ("body"). ภาคผนวก (HTMLS); console.log ($ ("mmm"+i)); console.log (ไล่ระดับสี [i]); $ (". mmm"+i) .css ("พื้นหลังสี", การไล่ระดับสี [i]); } </script> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น