如何根据投票百分比将进度颜色从黄过渡到红？优化多if判断实现

你可以用两种更简洁的方式替代多分支if，既保持原有的区间颜色逻辑，也能实现平滑渐变效果：

一、分段映射（保持原区间逻辑，无冗余判断） #

把颜色区间和对应色值做成配置数组，通过查找匹配区间来返回颜色，后期修改区间或颜色只需调整数组，不用动判断逻辑：

function progressColor(progress) {
  // 定义区间与颜色的映射表，和原逻辑完全对应
  const colorMap = [
    { min: 0, max: 24, color: '#FFE169' },
    { min: 25, max: 49, color: '#FFDE59' },
    { min: 50, max: 74, color: '#FF914D' },
    { min: 75, max: 89, color: '#FF7A7A' },
    { min: 90, max: 100, color: '#FF5757' }
  ];
  
  // 找到匹配的区间
  const matched = colorMap.find(item => progress >= item.min && progress <= item.max);
  // 兜底返回默认色（防止进度超出0-100范围）
  return matched ? matched.color : '#FFE169';
}

二、平滑颜色渐变（更自然的视觉过渡） #

如果想要颜色随百分比平滑变化，可以通过线性插值计算RGB通道值，实现从浅黄到深红的自然过渡。你可以自定义关键颜色节点，既支持分段渐变也支持全程平滑渐变：

// 辅助函数：计算两个数值间的线性插值
function lerp(start, end, ratio) {
  return start + (end - start) * ratio;
}

// 辅助函数：十六进制转RGB对象
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

// 辅助函数：RGB对象转十六进制
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}

function progressColor(progress) {
  // 自定义关键颜色节点，这里用原逻辑的区间节点，也可以改成少数几个节点实现全程平滑渐变
  const keyPoints = [
    { percent: 0, color: '#FFE169' },
    { percent: 24, color: '#FFE169' },
    { percent: 25, color: '#FFDE59' },
    { percent: 49, color: '#FFDE59' },
    { percent: 50, color: '#FF914D' },
    { percent: 74, color: '#FF914D' },
    { percent: 75, color: '#FF7A7A' },
    { percent: 89, color: '#FF7A7A' },
    { percent: 90, color: '#FF5757' },
    { percent: 100, color: '#FF5757' }
  ];

  // 定位当前进度所在的两个关键节点
  let startNode, endNode;
  for (let i = 0; i < keyPoints.length - 1; i++) {
    if (progress >= keyPoints[i].percent && progress <= keyPoints[i+1].percent) {
      startNode = keyPoints[i];
      endNode = keyPoints[i+1];
      break;
    }
  }

  // 兜底返回默认色
  if (!startNode || !endNode) return '#FFE169';

  // 计算当前进度在节点区间内的占比
  const segmentRatio = (progress - startNode.percent) / (endNode.percent - startNode.percent);
  // 转换颜色为RGB并插值计算
  const startRgb = hexToRgb(startNode.color);
  const endRgb = hexToRgb(endNode.color);
  const r = Math.round(lerp(startRgb.r, endRgb.r, segmentRatio));
  const g = Math.round(lerp(startRgb.g, endRgb.g, segmentRatio));
  const b = Math.round(lerp(startRgb.b, endRgb.b, segmentRatio));

  return rgbToHex(r, g, b);
}

如果想要全程平滑渐变，只需要修改keyPoints为几个关键节点即可，比如：

const keyPoints = [
  { percent: 0, color: '#FFE169' },
  { percent: 50, color: '#FF914D' },
  { percent: 100, color: '#FF5757' }
];

jQuery 调用示例 #

逻辑和原生JS一致，只是用jQuery方法设置样式：

// 更新指定进度条的颜色
function updateProgressBar(progress, selector) {
  const color = progressColor(progress);
  $(selector).css('background-color', color);
}

// 使用示例：给类名为.progress-bar的元素设置60%进度的颜色
updateProgressBar(60, '.progress-bar');

内容的提问来源于stack exchange，提问作者Khaled Al Hariri