将颜色值 onclick 从黑色增加到红色 Javascript

Question

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

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

这里是添加一个数字onclick的函数：

<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;
 }
}

这是我试过的：

a = x * 50 / 100
b = x * 80 / 100
c = x * 100 / 100

if(i == a){
 var $$ = Dom7;
 $$('body').addClass('yellow');
}
if(i == b){
 var $$ = Dom7;
 $$('body').addClass('red');
}
if(i == c){
 var $$ = Dom7;
 $$('body').addClass('red2');
}

感谢您的帮助！

Answer 1

let userNumberChoosen = 10 //asuuming here as 0 to 10, can be any number
let start = 0;
const changeColor = () => {
    const r = 255 * start/userNumberChoosen;
    const b = 0;
    const newColor ='rgb('+r+','+b+',0)';
 document.getElementById("change").style.backgroundColor = newColor;
  start += 1.  //increment color step
}

<html>
  <body>
    <div> Notice my background color </div>
    <div id="change">.</div> 
    <button onClick="changeColor()">Change background</button>
  </body>
  
</html>

Answer 2

尝试这个，假设 x 是极限，函数 obtenerRojo 将 return 红色阴影。

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');
  }
}

Answer 3

let maxlength = 500
let textLength = textValue.length //textValue is on change input text

let multiple = ((maxlength - textLength) * 10) / maxlength;
let gnb = 15.2 * multiple;
let colorShift = "rgb(152," + gnb + "," + gnb + ")"; 
//color shifts from gray to red

将颜色值 onclick 从黑色增加到红色 Javascript

Increase Color Value onclick from black to red Javascript

html

javascript

css

jquery

html-framework-7