Fatal编程技术网
  • javascript/
  • Javascript 在颜色之间动态平滑切换

Javascript 在颜色之间动态平滑切换

javascript angularjs

Javascript 在颜色之间动态平滑切换,javascript,angularjs,ng-class,Javascript,Angularjs,Ng Class,我使用ng类根据单元格的值为特定单元格着色 ng-class="{'score-cell green': value >= 70 , 'score-cell red': value <= 40, 'score-cell yellow': value < 70 && valu

我使用ng类根据单元格的值为特定单元格着色

ng-class="{'score-cell green': value >= 70 ,                                                
'score-cell red': value <= 40,                                                
'score-cell yellow': value < 70 && value > 40}"

ng class=“{'score-cell green'：值>=70，
“分数单元格红色”：值40}”
如何在类似的范围之间切换

它应该从红色逐渐过渡到黄色再过渡到绿色

请给我一些建议

请在这里找到这本书

尝试改用
ng样式。首先，您需要生成绿色和红色范围内的值（HSV颜色空间）。然后将其转换为十六进制值，并使用
背景色添加它。可以使用
ng repeat
在循环中渲染它们

以下是一个例子：



var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
//转换为十六进制的函数
函数toHex（n）{
var r=255-（n/10*255 | 0）；
g=n/10*255 | 0；
返回“#”+
（r？（r=r.toString（16），r.length==2？r:'0'+r:'00'）+
（g）（g=g.toString（16），g.length==2？g:'0'+g）：'00'）+'00'
}
var c=[0,1,2,3,4,5,6,7,8,9,10]；
$scope.colors=c.map（函数（x）{
返回到hex（x）
})
});


背景色：{{c}

您可以使用CSS转换：
.score单元格{transition:background color 2s；}
这不起作用。仍然是纯色。你需要创建调色板。我使用你的技术创建了调色板，但它现在没有显示任何价值。{{value}}@a2441918您正在渲染
{{value}
，但是您的元素（来自
ng repeat
）被命名为
color
，因此将其切换为
{color}
，而不是从API获取值。根据该值，表中的单元格应具有特定的颜色。这是一样的吗？它不会呈现任何东西，所以我需要将该值与数组中元素的索引进行比较，并将该颜色作为背景色。你能检查一下吗？