Блог

Главная - Вопросы по программированию - Изменить цвет индикатора выполнения, если значение больше максимального значения

Изменить цвет индикатора выполнения, если значение больше максимального значения

#javascript #progress-bar

#javascript #индикатор выполнения

Вопрос:

Как изменить цвет индикатора выполнения, если значение больше установленного максимального значения. это означает, что метка на индикаторе выполнения может превышать максимальное значение, установленное для индикатора выполнения, и цвет, который нужно изменить на красный, если значение больше максимального значения. если значение больше максимального значения, измените его на красный, иначе на синий.

 code:
https://jsbin.com/hamehel/1/edit?html,output

Ответ №1:

Как насчет использования флага, который сравнивает progress.max и progress.value?

 const progress = document.querySelector('#progress');
const up10 = () => {
  progress.value  = 10;
  changeStyle();
};
const down10 = () => {
  progress.value -= 10;
  changeStyle();
};
const changeStyle = () => {
  if (progress.max > progress.value) {
    progress.classList.remove('progress-max')
  } else {
    progress.classList.add('progress-max')
  }
}
changeStyle();  
 .progress-max {
  color: lightblue;
}
.progress-max::-moz-progress-bar {
  background: red;
}
.progress-max::-webkit-progress-bar {
  background: red;
}  
 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <progress id="progress" value="100" max="100"></progress>
    <button onclick="up10()">  10</button>
    <button onclick="down10()">-10</button>
  </body>
</html>

Комментарии:

1. Конечно, вы можете. Суть в том, чтобы добавить класс, если значение равно или больше, чем max, и удалить класс, если valus меньше max.