Javascript 将单击时的颜色值从黑色增加到红色

我正在开发一个应用程序，我正在尝试创建一个函数，将数字的颜色从黑色逐渐增加到红色。 例如，用户选择一个从0到100的数字，这意味着他可以点击按钮100次，直到他收到一条消息说他不能再点击了，我希望数字的颜色总是变红，直到计数器走到最后

数字0=黑色->数字100=全红色

以下是在单击时添加数字的函数：

<input type="text" id="inc" value="0" readonly="readonly"></input>

i = 0; // Default value (it's the number that shows on the counter)
x = 0; // It's the max value the user sets for the counter

function adicionar()
{
 if( i < x)
 {
  i++;
  document.getElementById('inc').value = i;
 }
}

谢谢你的帮助

让userNumberChoosen=10//a此处使用0到10，可以是任何数字
让start=0；
常量changeColor=（）=>{
常数r=255*start/userNumberChoosen；
常数b=0；
常数newColor='rgb（'+r+'，'+b+'，0'）；
document.getElementById（“change”）.style.backgroundColor=newColor；
开始+=1//增加颜色步长
}

注意我的背景色
. 
改变背景

试试这个，假设x是极限，函数

obtenerRojo

将返回红色阴影

let i = 0, x = 100;
document.getElementById("btn").addEventListener ('click', () => {
  adicionar ()
});
function obtenerRojo ( index, limit ) {
    return Math.floor(index*255/limit);
}
function adicionar() {
  if( i < x ) {
      i++;
      const inp = document.getElementById('inc');
      inp.value = i;
      const red = obtenerRojo ( i, x );
      inp.style.color = `rgb(${red},0,0)`;;
  } else {
    alert('limit exceeded');
  }
}

设i=0，x=100；
document.getElementById（“btn”）.addEventListener（'click'，（）=>{
adicionar（）
});
函数obtenerRojo（索引、限制）{
返回数学下限（索引*255/限制）；
}
函数adicionar（）{
if（i

您对哪一部分有困难？设置元素颜色？计算255的百分比？计算输入值与100之间的差值？确定输入的值是多少？需要更清楚地说明你的确切问题，还是你只是希望有人能为你写下整件事？我正在试图找到一种方法，当计数器达到50%时，改变文本的颜色，它是浅红色，80%更暗，100%全红色，但我不知道如何获得这些信息。我尝试了这个a=x*50/100-if（I==a）{…}，但它只适用于偶数黑色=red@0和全红色=red@255您的红色量将是：（x* 255）/ 100（第一次，因为它们是整数）应用于红色，<代码> $（“正文”）。CSS（“背景色”，“RGB（R，0, 0）））< /代码>如果您想考虑基于范围值的自定义着色，看看这个实现。谢谢你，先生！这就是我要找的

let i = 0, x = 100;
document.getElementById("btn").addEventListener ('click', () => {
  adicionar ()
});
function obtenerRojo ( index, limit ) {
    return Math.floor(index*255/limit);
}
function adicionar() {
  if( i < x ) {
      i++;
      const inp = document.getElementById('inc');
      inp.value = i;
      const red = obtenerRojo ( i, x );
      inp.style.color = `rgb(${red},0,0)`;;
  } else {
    alert('limit exceeded');
  }
}