Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menukar nilai Hex kepada nilai RGBA menggunakan JavaScript?
Semasa mereka bentuk halaman web, kami menggunakan warna untuk menjadikan halaman web lebih menarik dan menarik. Kami biasanya menggunakan kod heksadesimal untuk mewakili warna, tetapi kadangkala kami perlu menambah ketelusan pada warna, yang boleh dicapai melalui nilai RGBA.
Nilai warna heks diwakili oleh #RRGGBBAA dan nilai warna RGBA diwakili oleh rgba(merah, hijau, biru, alfa). Berikut ialah beberapa contoh nilai RGBA dan HEX -
Input: #7F11E0 Output: rgba( 127, 17, 224, 1 ) Input: #1C14B0 Output: rgba( 28, 20, 176, 1 )
Dalam artikel ini, kita akan membincangkan pelbagai cara untuk menukar Hex kepada RGBA menggunakan Javascript.
Gunakan kaedah parseInt dan String.substring
Gunakan penyusunan tatasusunan dan ungkapan biasa
parseInt() menerima dua parameter: rentetan mewakili nombor dan nombor mewakili pangkalan. Ia kemudian menukar rentetan kepada integer dalam pangkalan yang ditentukan dan mengembalikan hasilnya.
Kaedah rentetan.substring digunakan untuk mengekstrak beberapa bahagian rentetan dengan mendapatkan kedudukan mula dan akhir.
Untuk menukar HEX kepada RGBA kami menggunakan langkah berikut.
Simpan # dan gunakan kaedah String.substring untuk mengeluarkan sepasang dua aksara rentetan heks satu demi satu.
Selepas pengekstrakan, gunakan kaedah parseInt untuk menukar setiap pasangan kepada integer. Kami tahu bahawa pasangan ini ialah kod hex, jadi kami perlu menghantar 16 kepada hujah kedua parseInt.
Selepas menukar setiap pasangan kod perenambelasan kepada integer, gabungkannya ke dalam format RGBA.
Dalam contoh ini, kami menukar kod hex kepada RGBA.
<!DOCTYPE html> <html> <head> <title>Convert Hex to RGBA value using JavaScript</title> </head> <body> <h3>Converting Hex to RGBA value parseInt() and String.substring() methods</h3> <p id="input"> Hex Value: </p> <p id="output"> RGBA Value: </p> <script> let hex = "#7F11E0"; let opacity = "1"; // Convert each hex character pair into an integer let red = parseInt(hex.substring(1, 3), 16); let green = parseInt(hex.substring(3, 5), 16); let blue = parseInt(hex.substring(5, 7), 16); // Concatenate these codes into proper RGBA format let rgba = ` rgba(${red}, ${green}, ${blue}, ${opacity})` // Get input and output fields let inp = document.getElementById("input"); let opt = document.getElementById("output"); // Print the values inp.innerHTML += hex; opt.innerText += rgba; </script> </body> </html>
Kaedah Javascript Array map() mencipta tatasusunan baharu yang mengandungi hasil panggilan fungsi yang disediakan pada setiap elemen dalam tatasusunan.
Kaedah String.match digunakan untuk mendapatkan semula padanan apabila memadankan rentetan dengan ungkapan biasa.
Untuk menukar HEX kepada RGBA kami menggunakan langkah berikut.
Gunakan ungkapan biasa /ww/g dan kaedah String.match untuk memadankan setiap jujukan dua aksara alfanumerik berturut-turut bagi rentetan perenambelasan.
Anda akan mendapat tiga pasang aksara abjad angka dalam tatasusunan dan menukar aksara ini kepada integer menggunakan kaedah Array.map dan parseInt.
Dalam contoh ini, kami menukar kod hex kepada RGBA.
<!DOCTYPE html> <html> <head> <title>Converting Hex to RGBA value using JavaScript</title> </head> <body> <h3>Convert Hex to RGBA value using Array.map() and String.match() methods</h3> <p id="input"> Hex: </p> <p id="output"> RGBA: </p> <script> let hex = "#7F11E0"; let opacity = "1"; // Use a regular expression to extract the individual color values from the hex string let values = hex.match(/\w\w/g); // Convert the hex color values to decimal values using parseInt() and store them in r, g, and b let [r, g, b] = values.map((k) => parseInt(k, 16)) // Create the rgba string using the decimal values and opacity let rgba = ` rgba( ${r}, ${g}, ${b}, ${opacity} )` // Get input and output fields let inp = document.getElementById("input"); let opt = document.getElementById("output"); // Print the values inp.innerHTML += hex; opt.innerText += rgba; </script> </body> </html>
Atas ialah kandungan terperinci Bagaimana untuk menukar nilai Hex kepada nilai RGBA menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!