jsは色値フォーマットの変換rgbと16進数の変換を実現します.

1652 ワード

先端開発・・・ JavaScript javascript 色の書式変換 rgbと16進数の変換

この文章はプロトタイプの形でstring文字列の種類を追加する方法で、色の値フォーマットの変換を実現します.
原型の方法を使わないなら、実現方法を参考にすればいいです.

RGB変換は16進数になります.

String.prototype.colorHex = function () {
  // RGB      
  var reg = /^(rgb|RGB)/;
  var color = this;
  if (reg.test(color)) {
    var strHex = "#";
    //  RGB 3       
    var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
    //   16  
    for (var i = 0; i < colorArr.length; i++) {
      var hex = Number(colorArr[i]).toString(16);
      if (hex === "0") {
        hex += hex;
      }
      strHex += hex;
    }
    return strHex;
  } else {
    return String(color);
  }
};

使用方法:

"rgb(255,255,255)".colorHex();  // #ffffff

16進数はRGBに変換する.

String.prototype.colorRgb = function () {
  // 16        
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  //         
  var color = this.toLowerCase();
  if (reg.test(color)) {
    //         ，     ， ：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    //         ，  RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    return "RGB(" + colorChange.join(",") + ")";
  } else {
    return color;
  }
};

使用方法:

"#fff".colorRgb();  // rgb(255,255,255)
"#ffffff".colorRgb();  // rgb(255,255,255)

Javascriptを遊んでJSにテストを書きます.