zoukankan      html  css  js  c++  java
  • JS实现颜色值格式转换 rgb和十六进制的转换

    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)




  • 相关阅读:
    html语法规范
    html页面基本结构
    HTML头部结构详解
    文件路径中 / 和 ./ 和 ../的区别
    实体符号
    利用JS修改style属性和添加元素类名(important)
    Less
    Eureka自我保护计算
    Eureka元数据
    EurekaServer源码分析
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/13055107.html
Copyright © 2011-2022 走看看