JavaScript實現(xiàn)16進制顏色值轉(zhuǎn)RGB的方法
更新時間：2015年02月09日 09:23:34 作者：ZEAL
這篇文章主要介紹了JavaScript實現(xiàn)16進制顏色值轉(zhuǎn)RGB的方法,是javascript比較典型的數(shù)值轉(zhuǎn)換應用技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)16進制顏色值轉(zhuǎn)RGB的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<!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進制顏色值轉(zhuǎn)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進制顏色值轉(zhuǎn)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="轉(zhuǎn)換" 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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>16進制顏色值轉(zhuǎn)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進制顏色值轉(zhuǎn)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="轉(zhuǎn)換" 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程序設計有所幫助。
相關(guān)文章
使用contextMenu插件實現(xiàn)Bootstrap table彈出右鍵菜單
如今Bootstrap這個前端框架已被許多人接受并應用在不同的項目中，其中“開發(fā)高效，設備兼容”的特點表現(xiàn)得非常明顯。這篇文章主要介紹了使用contextMenu插件實現(xiàn)Bootstrap table彈出右鍵菜單,需要的朋友可以參考下2017-02-02
本篇文章主要介紹了微信小程序之頁面攔截器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Iview DatePicker 限制選擇當前月份及以后的月份
文章介紹了如何使用iviewDatePicker組件限制用戶只能選擇當前月份及以后的月份,并提供了相關(guān)的html代碼和js代碼示例,感興趣的朋友跟隨小編一起看看吧2024-11-11
JavaScript對象除了可以保持自有的屬性外，還可以從一個稱為原型的對象繼承屬性。這篇文章主要介紹了詳解JavaScript權(quán)威指南 之對象的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了基于javascript實現(xiàn)全屏漂浮廣告，光標懸浮廣告停止移動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
JS基于HTML5的canvas標簽實現(xiàn)炫目的色相球動畫效果實例
這篇文章主要介紹了JS基于HTML5的canvas標簽實現(xiàn)色相球效果,結(jié)合實例形式分析了基于canvas標簽實現(xiàn)圖形繪制的相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
空值合并運算符是一個邏輯運算符,當左側(cè)的操作數(shù)為null或undefined時,會返回右側(cè)操作數(shù),否則返回左側(cè)操作數(shù),本文就來詳細的介紹一下如何使用2023-12-12
這篇文章主要介紹了何時使用Map來代替普通的JS對象，對Map感興趣的同學，可以參考下2021-04-04
手把手教會你用Javascript實現(xiàn)放大鏡效果(詳細注釋+完整代碼)
放大鏡可以說是前端人必須學會的程序之一,下面這篇文章主要給大家介紹了關(guān)于手把手教會你用Javascript實現(xiàn)放大鏡效果的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了JavaScript中文件上傳API，介紹了上傳文件API的使用方法，感興趣的小伙伴們可以參考一下2016-04-04