Rumah >hujung hadapan web >tutorial js >Bagaimanakah saya boleh mencerahkan atau menggelapkan warna heks secara pemrograman dalam JavaScript?
Fungsi ini membolehkan anda mencerahkan atau menggelapkan warna heks secara pemrograman dengan jumlah tertentu. Hanya hantar dalam rentetan seperti "3F6D2A" untuk warna dan integer amt untuk amaun menjadi cerah atau gelap. Untuk menggelapkan, masukkan nombor negatif (cth., -20).
<code class="js">function LightenDarkenColor(col, amt) { col = parseInt(col, 16); return (((col & 0x0000FF) + amt) | ((((col >> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16); } // TEST console.log(LightenDarkenColor("3F6D2A", 40));
Versi yang lebih pantas dan lebih kecil:
<code class="js">function LightenDarkenColor(col, amt) { var num = parseInt(col, 16); var r = (num >> 16) + amt; var b = ((num >> 8) & 0x00FF) + amt; var g = (num & 0x0000FF) + amt; var newColor = g | (b << 8) | (r << 16); return newColor.toString(16); } // TEST console.log(LightenDarkenColor("3F6D2A", -40));
Kendalikan warna dengan atau tanpa awalan #:
<code class="js">function LightenDarkenColor(col, amt) { var usePound = false; if ( col[0] == "#" ) { col = col.slice(1); usePound = true; } var num = parseInt(col, 16); var r = (num >> 16) + amt; if ( r > 255 ) r = 255; else if (r < 0) r = 0; var b = ((num >> 8) & 0x00FF) + amt; if ( b > 255 ) b = 255; else if (b < 0) b = 0; var g = (num & 0x0000FF) + amt; if ( g > 255 ) g = 255; else if ( g < 0 ) g = 0; return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); }</code>
Untuk menggunakan fungsi, hanya masukkan rentetan warna hex yang anda ingin cerahkan atau gelap, dan jumlah yang anda mahu laraskan. Contohnya, kod berikut mencerahkan warna "3F6D2A" sebanyak 40:
<code class="js">const lightenedColor = LightenDarkenColor("3F6D2A", 40); console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE</code>
Prestasi fungsi ini dioptimumkan untuk kelajuan dan saiz. Ia menggunakan operasi bitwise untuk memanipulasi nilai warna, yang menjadikannya sangat pantas. Fungsi ini juga sangat kecil, menjadikannya sesuai untuk digunakan dalam aplikasi kecil.
Atas ialah kandungan terperinci Bagaimanakah saya boleh mencerahkan atau menggelapkan warna heks secara pemrograman dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!