1

Пытаюсь сделать полосу прогресса.

Почему-то у меня работает неправильно, мне нужно чтобы остановилось на 9.2 Подскажите пожалуйста, как это сделать?

Всем спасибо, оба ответа рабочие

https://codepen.io/programmer005/pen/JjbqaEX

$('.start').click(function() {
// progressbar
    var progressbar = $('#progressbar'),
        max = progressbar.attr('max'),
        time = (100/max),
        value = progressbar.val();

    var loading = function() {
        value += 0.1;
        addValue = progressbar.val(value);

        $('.progress-value').html(value.toFixed(1));

        if (value == max) {
            clearInterval(animate);
        }
    };

    var animate = setInterval(function() {
        loading();
    }, time);
    return false;

});
.html5-progress-bar {
    padding: 15px 15px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, .2);
}
.html5-progress-bar progress {
    background-color: #f3f3f3;
    border: 0;
    width: 80%;
    height: 18px;
    border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-bar {
    background-color: #f3f3f3;
    border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-value {
    background: #cdeb8e;
    background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
    background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
    border-radius: 9px;
}
.html5-progress-bar progress::-moz-progress-bar {
    background: #cdeb8e;
    background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
    background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
    background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
    border-radius: 9px;
}
.html5-progress-bar .progress-value {
    padding: 0px 5px;
    line-height: 20px;
    margin-left: 5px;
    font-size: .8em;
    color: #555;
    height: 18px;
    float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-wrapper html5-progress-bar">
 <div class="progress-bar-wrapper">
 <br><br>
  <progress id="progressbar" value="0" max="9.2"></progress>
  <span class="progress-value">0.0</span>          
   </div>
</div>

<button class="start">start</button>

2 ответа 2

7

Это подводный камень из серии 0.1 + 0.2 = 0.30000000000000004

Вообще, если у вас есть цикл, который изменяя число, должен остановиться, когда оно достигнет до какого-то N, везде на всякий случай стоит использовать операторы <= и >= вместо ==

let x = 0.5;

while (true) {
  if (x >= 1) break; // Если заменить на x == 1, пойдет бесконечный цикл.
  
  x += 0.1;
  console.log(x);
}
.as-console-wrapper { min-height: 100vh !important }

И у вас, замена == на >= решает вопрос бесконечной анимации:

$('.start').click(function() {
  var progressbar = $('#progressbar'),
    max = progressbar.attr('max'),
    time = (100 / max),
    value = progressbar.val();

  var loading = function() {    
    value = Math.min(max, value + 0.1);
    // Пришлось добавить ограничитель, чтобы остановиться ровно на max
    
    addValue = progressbar.val(value);

    $('.progress-value').html(value.toFixed(1));
    
    if (value >= max) {
      // Даже при уверенности, что они будут равны, всё равно оставлю >=, страховка.
      clearInterval(animate);
    }
  };

  var animate = setInterval(function() {
    loading();
  }, time);
  return false;

});
.html5-progress-bar {
  padding: 15px 15px;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .2);
}

.html5-progress-bar progress {
  background-color: #f3f3f3;
  border: 0;
  width: 80%;
  height: 18px;
  border-radius: 9px;
}

.html5-progress-bar progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 9px;
}

.html5-progress-bar progress::-webkit-progress-value {
  background: #cdeb8e;
  background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdeb8e), color-stop(100%, #a5c956));
  background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -o-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -ms-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: linear-gradient(to bottom, #cdeb8e 0%, #a5c956 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956', GradientType=0);
  border-radius: 9px;
}

.html5-progress-bar progress::-moz-progress-bar {
  background: #cdeb8e;
  background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdeb8e), color-stop(100%, #a5c956));
  background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -o-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: -ms-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  background: linear-gradient(to bottom, #cdeb8e 0%, #a5c956 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956', GradientType=0);
  border-radius: 9px;
}

.html5-progress-bar .progress-value {
  padding: 0px 5px;
  line-height: 20px;
  margin-left: 5px;
  font-size: .8em;
  color: #555;
  height: 18px;
  float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-wrapper html5-progress-bar">
  <div class="progress-bar-wrapper">
    <br><br>
    <progress id="progressbar" value="0" max="9.2"></progress>
    <span class="progress-value">0.0</span>
  </div>
</div>

<button class="start">start</button>

1
6
if (value.toFixed(1) == max) {
    clearInterval(animate);
}
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.