Как я могу обновить переменную php в режиме реального времени

Мне нужно обновить значение диапазона в режиме реального времени. Я уже пытался использовать setinterval и getelementbyid, но он создает конфликт с другим сценарием и не считывает значение идентификатора, единственное, что мне нужно, это обновлять значение диапазона каждую минуту или меньше, я надеюсь, и они могут помочь мне

percent = $('.bar div span').html();
total = $('.bar').attr('data-total');
percentStart = 0;

setInterval(function() {
  $('.show').css('height',percentStart/total*100+'%');
  $('.bar').css('height',percentStart/total*100+'%');
  $('.bar div span').html(Math.floor(percentStart/total*100)+'%');
  if(percentStart<percent) {
    percentStart=percentStart+5;
  }},1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="show"></div>
  <div class="bar" data-total="1000">  
  <div><span>750</span></div></div>
  <div class="suitcase">
0
задан 30.11.2019, 03:03
1 ответ

Я не понимаю хорошо quГ© он был должен содержать .show. Но, в конце концов, если ты будешь давать процентную высоту div, это должно быть процентное содержание чего-то, которое dom понимал бы. Для этого примера я поместил ему контейнер с установленной высотой. Таким образом .bar растет пропорционально на уровне отца.

let percent = $('.bar div span').html(),
  total = $('.bar').attr('data-total'),
  percentStart = 0,
  interval = setInterval(function() {
    let contentHeight=percentStart / total * 100;
    $('.show').css('height', contentHeight+'%');
    $('.bar').css('height',contentHeight+'%');
    $('.bar div span').html(Math.floor(contentHeight) + '%');
    if (percentStart < percent) {
      percentStart = percentStart + 25;
    } else {
      clearInterval(interval);
    }
  }, 50);
.contenedor {
  height: 150px;
  width: 50px;
  background: #eee;
  display: flex;
}

.bar {
  display: flex;
  background: steelblue;
  color: white;
  font-weight: bold;
  font-family: sans-serif;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 100%;
}

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="contenedor">
<div class="show"></div>

  <div class="bar" data-total="1000" style="height:0">
    <div><span>750</span></div>
  </div>
</div>

Глаз, закончив цикл, лучше, чтобы ты закончил interval, а Г©ste seguirГЎ навсегда бессмысленно.

0
ответ дан 01.12.2019, 10:33

Теги

Похожие вопросы