CSS自定义HTML进度条填充：基于AngularJS指定红绿色块

嘿，我完全懂你要做的这个自定义进度条——不是常规的连续进度条，而是把1-30的「月份」拆成独立区块，特定几个标红、其余标绿对吧？这其实用AngularJS的指令和动态类就能轻松实现，我给你写个完整的可运行示例：

第一步：HTML结构 #

用ng-repeat循环生成30个月份区块，通过ng-class动态切换颜色类：

<div ng-app="monthProgressApp" ng-controller="MonthProgressCtrl">
  <div class="progress-container">
    <div 
      class="month-block" 
      ng-repeat="month in months track by $index"
      ng-class="{'red-block': isRedMonth(month), 'green-block': !isRedMonth(month)}"
    >
      {{month}}
    </div>
  </div>
</div>

第二步：AngularJS控制器逻辑 #

在控制器里定义要标红的月份数组，生成1-30的月份列表，再加一个判断函数：

angular.module('monthProgressApp', [])
.controller('MonthProgressCtrl', function($scope) {
  // 定义需要标红的月份（可以改成从外部传入的数据）
  $scope.redMonths = [5, 10, 12, 16];
  
  // 快速生成1到30的月份数组
  $scope.months = Array.from({length: 30}, (_, i) => i + 1);
  
  // 判断当前月份是否需要标红
  $scope.isRedMonth = function(month) {
    return $scope.redMonths.includes(month);
  };
});

第三步：CSS样式 #

用Flex布局让区块均匀并排，设置基础样式和颜色：

.progress-container {
  display: flex;
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.month-block {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}

.green-block {
  background-color: #2ecc71;
}

.red-block {
  background-color: #e74c3c;
}

关键细节说明 #

• Array.from用来快速生成1-30的数组，比手动写循环更简洁高效
• ng-class根据isRedMonth的返回值动态切换颜色类，逻辑清晰易维护
• Flex布局确保每个区块宽度自动均分，适配不同容器宽度
• 如果需要动态传入红月份数据，只需要把$scope.redMonths改成接收外部参数即可

你只需要在HTML里引入AngularJS的基础脚本（比如<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>），就能直接运行这段代码看到效果啦！

内容的提问来源于stack exchange，提问作者Kondziowsky