Блог

Главная - Вопросы по программированию - Цвет индикатора выполнения JS не виден

Цвет индикатора выполнения JS не виден

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я работаю с индикаторами выполнения с помощью jQuery.

Итак, проблема в том, что я определяю стандартные цвета, которые я хочу показывать на своем индикаторе выполнения, в зависимости от значения, которое я получил.

Мой код:

 var defaultSegmentColors = ['#FF6363', '#FEF567', '#70FE67'];

function move(value, color, barID) {
  var elem = document.getElementById(barID);
  var width = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= value) {
      clearInterval(id);
    } else {
      width  ;
      elem.style.width = width   '%';
      elem.innerHTML = width * 1   '%';
      $('.myBar').css("background-color", color);
    }
  }
}


function refresh(barElem) {
  var color = "";
  var elements = {
    value: parseInt($(barElem).attr('value')),
    idBar: $(barElem).attr('value-field')
  }

  if (elements['value'] <= 50) {
    color = defaultSegmentColors[0];

  } else if (elements['value'] <= 80) {
    color = defaultSegmentColors[1];

  } else if (elements['value'] <= 85) {
    color = defaultSegmentColors[2];

  }



  move(elements['value'], color, elements['idBar']);
}




$('[data-type="sfcs-progres-bar"]').each(function() {
  refresh(this);
});  
 #myProgress {
  margin: 5px;
  margin-left: 10%;
  border-radius: 20px;
  width: 85%;
  background-color: #ddd;
}

.myBar {
  width: 10%;
  height: 40px;
  background-color: #535353;
  text-align: center;
  line-height: 40px;
  color: white;
  border-radius: 20px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myProgress">
  <div id="myBar0" class="myBar" data-type="sfcs-progres-bar" value="43" value-field="myBar0"></div>
</div>
<br />
<div id="myProgress">
  <div id="myBar1" class="myBar" data-type="sfcs-progres-bar" value="80" value-field="myBar1"></div>
</div>
<br />
<div id="myProgress">
  <div id="myBar2" class="myBar" data-type="sfcs-progres-bar" value="90" value-field="myBar2"></div>
</div>

Как вы можете видеть, у меня есть функция, с помощью которой я могу проверять элементы [‘value’], и в конце я возвращаю некоторое значение цвета из массива defaultSegmentColors, в котором у меня есть шестнадцатеричные цвета.

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

Ответ №1:

Это дает то, что вы ищете. Проходя по .myBar классу, он принимает значение конечного элемента и присваивает его всем вашим столбцам — изменение класса на barID значение приводит к появлению цветов, которые вы хотите, чтобы они отображались.

 var defaultSegmentColors = ['#FF6363', '#FEF567', '#70FE67'];

function move(value, color, barID) {
  var elem = document.getElementById(barID);
  var width = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= value) {
      clearInterval(id);
    } else {
      width  ;
      elem.style.width = width   '%';
      elem.innerHTML = width * 1   '%';

      
      $('#'   barID).css("background-color", color);
    }
  }
}


function refresh(barElem) {
  var color = "";
  var elements = {
    value: parseInt($(barElem).attr('value')),
    idBar: $(barElem).attr('value-field')
  }

  if (elements['value'] <= 50) {
    color = defaultSegmentColors[0];

  } else if (elements['value'] <= 80) {
    color = defaultSegmentColors[1];

  } else {
    color = defaultSegmentColors[2];

  }

  move(elements['value'], color, elements['idBar']);
}




$('[data-type="sfcs-progres-bar"]').each(function() {
  refresh(this);
});  
 #myProgress {
  margin: 5px;
  margin-left: 10%;
  border-radius: 20px;
  width: 85%;
  background-color: #ddd;
}

.myBar {
  width: 10%;
  height: 40px;
  background-color: #535353;
  text-align: center;
  line-height: 40px;
  color: white;
  border-radius: 20px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myProgress">
  <div id="myBar0" class="myBar" data-type="sfcs-progres-bar" value="43" value-field="myBar0"></div>
</div>
<br />
<div id="myProgress">
  <div id="myBar1" class="myBar" data-type="sfcs-progres-bar" value="80" value-field="myBar1"></div>
</div>
<br />
<div id="myProgress">
  <div id="myBar2" class="myBar" data-type="sfcs-progres-bar" value="90" value-field="myBar2"></div>
</div>

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

1. Как вы можете видеть, индикатор выполнения # 3 черный, но он должен быть другого цвета

2. Зеленый цвет был доступен только между 81 и 85, из-за следующей части: else if (elements['value'] <= 85) . Включите это, else и он обеспечит нужный вам зеленый цвет 🙂 Я отредактировал свой фрагмент, чтобы он соответствовал этому.