js实现颜色阶梯渐变效果（Gradient算法）

js 实现rgb和十六进制的代码转化

 js实现颜色阶梯渐变效果（Gradient算法）
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js实现颜色阶梯渐变效果（Gradient算法）</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      background-color: gray;
    }
  </style>
</head>

<body>

</body>

</html>

<script type="text/javascript">
  function gradientColor(startColor, endColor, step) {
    step = step
    var startRGB = this.colorRgb(startColor); //转换为rgb数组模式
    var startR = startRGB[0];
    var startG = startRGB[1];
    var startB = startRGB[2];
    var endRGB = this.colorRgb(endColor);
    var endR = endRGB[0];
    var endG = endRGB[1];
    var endB = endRGB[2];
    var sR = (endR - startR) / (step - 1); //总差值
    var sG = (endG - startG) / (step - 1);
    var sB = (endB - startB) / (step - 1);
    var colorArr = [];
    for (var i = 0; i < step; i++) {
      //计算每一步的hex值 
      var hex = this.colorHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
      colorArr.push(hex);
    }
    return colorArr;
  }
  // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
  gradientColor.prototype.colorRgb = function (sColor) {
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var sColor = sColor.toLowerCase();
    if (sColor && reg.test(sColor)) {
      if (sColor.length === 4) {
        var sColorNew = "#";
        for (var i = 1; i < 4; i += 1) {
          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
        }
        sColor = sColorNew;
      }
      //处理六位的颜色值
      var sColorChange = [];
      for (var i = 1; i < 7; i += 2) {
        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
      }
      return sColorChange;
    } else {
      return sColor;
    }
  };
  // 将rgb表示方式转换为hex表示方式
  gradientColor.prototype.colorHex = function (rgb) {
    var _this = rgb;
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    if (/^(rgb|RGB)/.test(_this)) {
      var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
      var strHex = "#";
      for (var i = 0; i < aColor.length; i++) {
        var hex = Number(aColor[i]).toString(16);
        hex = hex < 10 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
        if (hex === "0") {
          hex += hex;
        }
        strHex += hex;
      }
      if (strHex.length !== 7) {
        strHex = _this;
      }
      return strHex;
    } else if (reg.test(_this)) {
      var aNum = _this.replace(/#/, "").split("");
      if (aNum.length === 6) {
        return _this;
      } else if (aNum.length === 3) {
        var numHex = "#";
        for (var i = 0; i < aNum.length; i += 1) {
          numHex += (aNum[i] + aNum[i]);
        }
        return numHex;
      }
    } else {
      return _this;
    }
  }

  function setRgbTo16(str) {
    let reg = /^(rgb|RGB)/;
    if (!reg.test(str)) {
      return;
    }
    // 将str中的数字提取出来放进数组中
    var arr = str.slice(4, str.length - 1).split(",");
    let c = '#';
    for (var i = 0; i < arr.length; i++) {
      // Number() 函数把对象的值转换为数字
      // toString(16) 将数字转换为十六进制的字符表示
      var t = Number(arr[i]).toString(16);
      //如果小于16，需要补0操作,否则只有5位数
      if (Number(arr[i]) < 16) {
        t = '0' + t;
      }
      c += t;
    }
    return c;
  }
  var gradient = new gradientColor('#ff0', '#f0f', 50);
  console.log(gradient); //控制台输出
  console.log(gradient.map(item => setRgbTo16(item)))
  const arr = gradient.map(item => setRgbTo16(item))
  const body = document.body
  for (var i = 0, len = arr.length; i < len; i++) {
    var span = document.createElement('span')
    span.innerHTML = i;
    span.style.cssText = `background: ${arr[i]};display: block;width: 100px;height: 30px;margin: 10px`
    body.appendChild(span)
  }
</script>
效果如下
posted @ 2022-11-12 18:23 web_cnblogs 阅读(609) 评论(0) 收藏举报
刷新页面返回顶部
js实现颜色阶梯渐变效果（Gradient算法）

公告
