資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 將 3 位顏色程式碼轉換為 6 位顏色程式碼？
在本教程中，我們將瞭解如何在 JavaScript 中將 3 位顏色程式碼轉換為 6 位顏色程式碼。
因此，基本上，三位顏色程式碼表示以 #RGB 格式表示的顏色值的三個數字。要將 3 位顏色十六進位制顏色轉換為 6 位顏色，我們只需將三位顏色中的每個元素都複製一遍即可。
如果用簡單的方式來說，複製三位顏色程式碼將得到一個十六進位制顏色程式碼，其值與三位顏色程式碼的值相同。
3 位值：#RGB 將在 6 位顏色程式碼中寫成 #RRGGBB。
例如，
3-digit value: #08c 6-digit color Code: #0088cc
演算法
步驟 1
首先，我們將檢查其長度是否為 3。如果 (hexcolorCode.length === 3)，則我們才會對其執行某些操作，否則我們將保持不變。因此，如果它滿足長度屬性為 3。
步驟 2
現在，我們將使用 hexcolorCode.split(“”) 方法進行分割。split() 方法使用分隔符將字串分解成陣列，預設分隔符為一個空格“ ”。
因此，應用 split() 後，它將返回 [‘f’, ‘b’, ‘0’]。
步驟 3
現在，我們將應用 map 方法並遍歷陣列中的所有項，然後我們將透過將項新增到自身來執行重複操作
因此，我們來自步驟 2 的陣列是：arr= [‘f’, ‘b’, ‘0’]。
應用 map 後 -
arr.map(function(hexVal){
return hexVal+hexVal;
});步驟 4
現在，我們將應用 join 方法，該方法將陣列的每一項轉換為一個字串，join 方法有一個分隔符，在連線每一項陣列時位於每一項之間，如果我們沒有在其中指定任何分隔符，則預設情況下它將被視為逗號“，”
因此，從步驟 3 的程式碼中，我們只需在最後新增 join 方法，
arr.map(function(hexVal){
return hexVal+hexVal;
}).join(‘’);讓我們看看我們的函式程式碼 -
if(hexcolorCode.length===3){
var arr=hexcolorCode.split("")
var sixDigit=arr.map(function(hexVal){
return hexVal+hexVal;
}).join('');這裡我們所有的步驟都已組合在一起，如果 hexColorCode 的長度為 3，則我們才會繼續執行，之後我們將應用 split 函式將其從輸入的字串轉換為陣列，然後我們將應用 map，然後在迭代時，我們將並行新增其值的兩次，我們將連線陣列中存在的全部字元。
示例
現在，讓我們將我們的 JavaScript 函式程式碼嵌入到 HTML 網頁中以進行即時檢查。
<!DOCTYPE html>
<html>
<body>
<h2>Convert 3 digit hex code to 6 digit code</h2>
<input type="text" id="val" placeholder="Enter 3 digit hexCode " />
<input type="button" value="Convert" onclick="ConvertToSix()" style="color: blue"/>
<h2 id="writeHere"></h2>
<script>
function ConvertToSix(){
var hexcolorCode=document.getElementById("val").value
if(hexcolorCode.length===3){
var arr=hexcolorCode.split("")
var sixDigit=arr.map(function(hexVal){
return hexVal+hexVal;
}).join('');
document.getElementById('writeHere').innerHTML=sixDigit
} else {
document.getElementById('writeHere').innerHTML="Please enter 3 digit hex code..!"
}
}
</script>
</body>
</html>輸出
因此，我們看到了將 3 位顏色程式碼轉換為 6 位十六進位制顏色程式碼需要遵循的所有過程和步驟，並且還了解了如何在實際應用中使用它。
997 次檢視
