0x01 前言

在课程表/成绩查询应用中常见到分数的显示。而多数情况下需要明确的表征分数的高低。颜色可以很好的做一下区分。比如60分以下为红色而60分以上为绿色。
但是，单纯的使用红色和绿色又过为单调，所以可以采取60分以下为红色，而60分以上根据分数进行红色到绿色的渐变。

0x02 实现

函数输入score参数作为颜色判断的基础，如果小于60返回红色，大于60做渐变处理。

getColorFromScore(score){
    //红200-0  绿0-187
    try {
      if (score < 60) {
        return '#ff0000';
      } else {

        let scoreB = score - 60;
        let p = score / 100;
        let pr = scoreB / 40;
        if (pr > 1){
          pr = 1;
        }
        let r = parseInt(200 - pr * 200).toString(16);
        if(r.length < 2){
          r = '0'+r;
        }
        let g = parseInt(p * 187).toString(16);
        if (g.length < 2) {
          g = '0' + g;
        }
        return '#' + r + g + '00';//红绿蓝
      }
    }catch(e){
      console.log(e)
      return '00bb00'
    }

0x03 效果

image.png

至此，根据分数的颜色渐变实现完成。