Javascript 从两种颜色之间的int间隔（0100）返回十六进制颜色

我正在尝试在我的网络游戏中创建一个动画的健康栏，当我们的体重增加时，它会改变颜色。运行状况栏的值可以介于0和100之间。达到0时的颜色为“#FF0000”，满时的颜色应为“#00FF00”。我只需要将这个整数转换为十六进制字符串的逻辑

Obs：我使用的是纯Javascript。我想不使用任何插件

这应该可以：

const valueToColor=value=>{
设gHex=Math.round（value*255/100）//将[01100]校准为[00，FF]（=[0255]）
让rHex=255-gHex//只是gHex的镜像
gHex=gHex.toString（16）//转换为传统的十六进制表示法
rHex=rHex.toString（16）
gHex=gHex.length==1？`0${gHex}`:gHex//在单位数值的情况下补偿缺失的数字
rHex=rHex.length==1？`0${rHex}`:rHex
返回`${rHex}${gHex}00`//以颜色代码组合这两者
}
console.log（valueToColor（0））/#ff0000
控制台日志（颜色值（100））/#00ff00
console.log（颜色值（50））/#7f8000
console.log（valueToColor（23））/#c43b00
console.log（valueToColor（85））/#26d900

这应该可以：

const valueToColor=value=>{
设gHex=Math.round（value*255/100）//将[01100]校准为[00，FF]（=[0255]）
让rHex=255-gHex//只是gHex的镜像
gHex=gHex.toString（16）//转换为传统的十六进制表示法
rHex=rHex.toString（16）
gHex=gHex.length==1？`0${gHex}`:gHex//在单位数值的情况下补偿缺失的数字
rHex=rHex.length==1？`0${rHex}`:rHex
返回`${rHex}${gHex}00`//以颜色代码组合这两者
}
console.log（valueToColor（0））/#ff0000
控制台日志（颜色值（100））/#00ff00
console.log（颜色值（50））/#7f8000
console.log（valueToColor（23））/#c43b00
console.log（valueToColor（85））/#26d900

实现您的想法可能不需要这样的转换，使用其他颜色模型的解决方案非常合适：

功能fRGB（obj）{
设nVal=+obj.value；
obj.style.boxShadow=`插入0 0 7px 6px rgb（${255-nVal*2.55}，${nVal*2.55}，0）`；
}
功能fHSL（obj）{
设nVal=+obj.value；
obj.style.boxShadow=`inset 0 0 7px 6px hsl（${nVal*1.2}，100%，50%）`；
}

RGB



HSL

实现您的想法可能不需要这样的转换，使用其他颜色模型的解决方案非常合适：

功能fRGB（obj）{
设nVal=+obj.value；
obj.style.boxShadow=`插入0 0 7px 6px rgb（${255-nVal*2.55}，${nVal*2.55}，0）`；
}
功能fHSL（obj）{
设nVal=+obj.value；
obj.style.boxShadow=`inset 0 0 7px 6px hsl（${nVal*1.2}，100%，50%）`；
}

RGB



HSL