首頁 > 開發者 > JavaScript
JavaScript實現16進位顏色值轉RGB的方法，javascriptrgb
本文執行個體講述了JavaScript實現16進位顏色值轉RGB的方法。分享給大家供大家參考。具體實現方法如下：
複製代碼 代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>16進位顏色值轉RGB</title>
<style>
*{margin:0;padding:0;font-family:'Microsoft yahei'}
.replace{width:400px;height:210px;margin:0 auto;padding-top:40px;}
.title{text-align:center;display:block}
form{width:200px;margin:30px auto;}
input{outline:none;}
input[type="button"]{cursor:pointer;}
</style>
<script>
function hexToR(h) {
return parseInt((cutHex(h)).substring(0, 2), 16)
}
function hexToG(h) {
return parseInt((cutHex(h)).substring(2, 4), 16)
}
function hexToB(h) {
return parseInt((cutHex(h)).substring(4, 6), 16)
}
function cutHex(h) {
return h.charAt(0) == "#" ? h.substring(1, 7) : h
}
function setBgColorById(id, sColor) {
var elems;
if (document.getElementById) {
if (elems = document.getElementById(id)) {
if (elems.style) elems.style.backgroundColor = sColor;
}
}
}
</script>
</head>
<body>
<div class="replace">
<span class="title">JavaScript原生16進位顏色值轉RGB值</span>
<form name="rgb">
<input value="ffffff" maxlength="7" size="16" name="hex" />
<input onclick="setBgColorById('colorSample',this.form.hex.value);
this.form.r.value=hexToR(this.form.hex.value);
this.form.g.value=hexToG(this.form.hex.value);
this.form.b.value=hexToB(this.form.hex.value);" value="轉換" type="button" name="btn"/>
<br /><br />
R:<input style="width:30px" size="3" name="r" />
G:<input style="width:30px" size="3" name="g" />
B:<input style="width:30px" size="3" name="b" />
</form>
</div>
</body>
</html>
運行效果如所示：
希望本文所述對大家的javascript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
