根据取值范围动态更新引导进度条背景颜色的jQuery代码

// HTML结构
<div class="progress-bar">
  <div class="progress"></div>
</div>

// CSS样式
.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
}

.progress {
  height: 100%;
  border-radius: 10px;
}

// jQuery代码
$(document).ready(function() {
  // 获取进度条元素和取值范围
  var progressBar = $('.progress');
  var minValue = 0;
  var maxValue = 100;

  // 模拟动态更新进度条的取值
  var currentValue = 50;

  // 计算进度条的百分比
  var percentage = (currentValue - minValue) / (maxValue - minValue) * 100;

  // 更新进度条的宽度和背景颜色
  progressBar.width(percentage + '%');
  progressBar.css('background-color', getProgressBarColor(percentage));
});

// 根据进度百分比获取对应的背景颜色
function getProgressBarColor(percentage) {
  if (percentage < 25) {
    return '#ff0000'; // 红色
  } else if (percentage < 50) {
    return '#ff9900'; // 橙色
  } else if (percentage < 75) {
    return '#ffff00'; // 黄色
  } else {
    return '#00ff00'; // 绿色
  }
}