Hari ini, ketika saya berada di sebuah organisasi, saya harus menampilkan warna di berbagai tingkat. Saya harus menghitung untuk waktu yang lama tetapi tidak bisa mengetahui metode gradien warna. Itu selalu mewah dan jelek. Jadi saya memeriksanya dan menemukan kode JS dan mencobanya. Itu sempurna!
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </iteme> </head> <body> <script src = "js/jQuery-1.11.3.js"> </script> <script src = "js/swiper-3. type = "text/javascript">/ * // startColor: start warna hex // endcolor: end warna hex // langkah: beberapa level (beberapa langkah) */function gradientcolor (startcolor, endcolor, step) {startrgb = this.colorrgb (startcolor); // convert ke rgbrgb = this.colorrgb (startColor); // convert ke rgb array = this.colorrgb (startColor); // convert ke rgb array = this.colorrgb (startColor);//convert ke rGB = this = colorrgb (startColor); // convert ke rgb armur startg = startrgb [1]; startb = startrgb [2]; endrgb = this.colorrgb (endcolor); endr = endrgb [0]; endg = endrgb [1]; endb = endrgb [2]; sr = (endr-startr)/step; // perbedaan total sg = (endg-startg)/langkah; sb = (endb-startb)/step; var colorarr = []; untuk (var i = 0; i <step; i ++) {// Hitung nilai hex dari setiap langkah var hex = this.colorhex ('rgb ('+parseInt ((sr*i+startr))+','+parseint ((sg*i+startg))+','+parseint (sb*i+i+))))); colorarr.push (hex); } return colorarr; } // Konversi representasi hex ke representasi rgb (kembalikan pola array rgb di sini) 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 = "#"; untuk (var i = 1; i <4; i+= 1) {scolornew+= scolor.slice (i, i+1) .concat (scolor.slice (i, i+1)); } scolor = scolornew; } // Proses nilai warna enam digit var scolorchange = []; untuk (var i = 1; i <7; i+= 2) {scolorchange.push (parseInt ("0x"+scolor.slice (i, i+2))); } return scolorchange; } else {return scolor; }}; // Konversi representasi RGB menjadi 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 = "#"; untuk (var i = 0; i <acolor.length; i ++) {var hex = angka (acolor [i]). tostring (16); hex = hex <10? 0+''+hex: hex; // Pastikan bahwa nilai masing-masing RGB adalah 2-bit 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; } lain jika (anum.length === 3) {var numhex = "#"; untuk (var i = 0; i <anum.length; i+= 1) {numHex+= (anum [i]+anum [i]); } return numhex; }} else {return _this; }} var gradient = gradientColor baru ('#e82400', '#8ae800', 10); Console.log (gradien); // Peringatan output konsol (gradien); for (var i = 0; i <gradient.length; i ++) {var htmls = '<verv>'+i+'</div>'; $ ("body"). append (htmls); console.log ($ ("mmm"+i)); console.log (gradient [i]); $ (". mmm"+i) .css ("latar belakang-warna", gradien [i]); } </script> </body> </html>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.