数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
