Увеличение значения цвета при нажатии с черного на красный Javascript - PullRequest
Новая
       2

Увеличение значения цвета при нажатии с черного на красный Javascript

0 голосов
/ 09 мая 2020

Я работаю над приложением и пытаюсь создать функцию, которая постепенно увеличивает цвет числа от черного до красного. Например, пользователь выбирает число от 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;
 }
}

Вот что я пробовал: 

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

Спасибо за вашу помощь!

Ответы [ 2 ]

0 голосов
/ 09 мая 2020

Попробуйте это, если 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');
  }
}
0 голосов
/ 09 мая 2020 

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>
...