JS练习：选择颜色，得到其HEX 和RGB

来源：互联网发布：fgo尼禄宝具本前后数据编辑：程序博客网时间：2024/06/10 22:14

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>

0 0