0

lo que necesito es actualizar en tiempo real el valor del span. ya lo intente usando setinterval y getelementbyid pero crea conflicto con el otro script y no lee el valor de un id, lo unico que nesesito es que se actualice el valor del span cada minuto o menos espero y me puedan ayudar

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">
1
  • 1
    ¿Declaraste percent, total y percentStartcomo var o let? Considera tambien el tiempo del setInterval, si deseas que sea cada segundo utiliza 1000. Commented el 30 nov. 2019 a las 2:21

1 respuesta 1

0

No entiendo bien qué debiera contener .show. Pero, en fin, si le vas a dar un alto porcentual a un div, tiene que ser el porcentaje de algo que el dom entienda. Para este ejemplo le puse un contenedor con alto fijo. De esa manera .bar crece proporcionalmente a la altura del padre.

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>

Ojo, al terminar el ciclo, es mejor que termines el interval, sino éste seguirá para siempre sin sentido.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.