本文章是以prototype原型的方式,给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 (alpha = 1) {
   // 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(",") + "," + alpha + " )";
  } else {
     return color;
  }
 };

使用方法:

 "#fff".colorRgb();  // rgb(255,255,255)
 "#ffffff".colorRgb();  // rgb(255,255,255)
 "#ffffff".colorRgb(0.5);//rgb(255,255,255, 0.5),带透明度

所有评论
加载评论 ...
发表评论