您的位置:首页 > Web前端 > JavaScript

JS练习:选择颜色,得到其HEX 和RGB

2015-12-30 15:49 756 查看
JS部分:

function  getRGB(){
var panelCOLOR=$('#color').val().toUpperCase();
$('#hex').val(panelCOLOR);
var hex = [panelCOLOR.substr(1,2),panelCOLOR.substr(3,2),panelCOLOR.substr(5,2)];
var rgb = [undefined,undefined,undefined];
var hexABC = ['A','B','C','D','E','F'];
var hexNum = [10,11,12,13,14,15];
var i = -1;
for(var x of hex){
console.log('hex'+hex);
i=i+1;
var m  = x.substr(0,1);
var n = x.substr(1,1);
console.log('i'+i);
if(isNaN(x) == false){
rgb[i] = parseInt(m)*16+parseInt(n);
var rgbColor = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
}else{
if(hexABC.indexOf(m)>-1){
var p = hexABC.indexOf(m);
m = hexNum[p];
}
if(hexABC.indexOf(n)>-1){
var q = hexABC.indexOf(n);
n = hexNum[q];
}
rgb[i] = parseInt(m)*16+parseInt(n);
rgbColor = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
}
}
$('#rgb').val(rgbColor);
}


html 部分:

<table class="table table-bordered">
<caption class="text-center">click the button,get HEX and RGB the color you choosed!</caption>
<thead>
<tr>
<th class="text-center">HEX</th>
<th class="text-center">RGB</th>
<th class="text-center">COLOR</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="hex" type="text" value="" readonly></td>
<td><input id="rgb" type="text" value="" readonly></td>
<td><input id="color" type="color" value=""></td>
</tr>
<tr>
<td class="text-center" colspan="3">
<button onClick=getRGB()>click me</button>
</td>
</tr>
</tbody>
</table>


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: