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

最新推荐文章于 2023-12-04 11:38:16 发布

breather_

最新推荐文章于 2023-12-04 11:38:16 发布

阅读量1.9k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/breather_/article/details/50435122

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>