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
至此，根据分数的颜色渐变实现完成。
