0

Estoy realizando un aplicativo que valora las tecnologías. Quisiera que las estadísticas se empiecen a mostrar de 0 al límite sacado con la consulta a la base de datos. Es decir, que se me vaya modificando el número hasta llegar un número al llegar a la sección de estadísticas (la tabla).

Tengo este código, pero se me muestra de una vez el número límite. Quisiera que se me vaya aumentando.

$(document).ready(function(){
	<?php
	$consultar_tec=mysqli_query($mysqli, "SELECT id_proyecto FROM proyectos");
	$ct=$consultar_tec->num_rows;
	?>
	var limite_t=<?php echo $ct; ?>;
	var i1=0;
	for (var l = i1; l <= limite_t; l++) {
		$("#tec_valoradas").html(l);
	}
});
<table id="estadsticos_tabla">
	<thead>
		<tr>
			<th id="tec_valoradas">0</th>
			<th>0</th>
			<th>0</th>
			<th>0</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>TECNOLOG&Iacute;AS VALORADAS</td>
			<td>POSIBLES PATENTES</td>
			<td>TECNOLOG&Iacute;AS EN EL MERCADO</td>
			<td>USUARIOS</td>
		</tr>
	</tbody>
</table>

5
  • Como quieres que se vaya aumentando?
    – alanfcm
    el 22 jul. 2019 a las 20:13
  • Que se vaya aumentando el número cada medio segundo, o cada segundo.
    – Saco04
    el 22 jul. 2019 a las 20:15
  • Si lo que quieres es un contador en linea debes usar ajax con setInterval
    – oegpyg
    el 22 jul. 2019 a las 20:15
  • 1
    Pero sería bueno que sucediera si se muestra la sección de las estadísticas.
    – Saco04
    el 22 jul. 2019 a las 20:15
  • No sé cómo usarlo en este caso. Lo he intentado, pero sigue sin funcionar.
    – Saco04
    el 22 jul. 2019 a las 20:18

2 respuestas 2

1

Puedes lograr lo que quieres usando setTimeout() asi:

$(document).ready(function(){	
	var limite_t=10;
	var i1=0;
	for (var l = i1; l <= limite_t; l++) {
        (function (l) {
          setTimeout(function () {
		    $("#tec_valoradas").html(l);
          }, 500*l);
        })(l);
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table id="estadsticos_tabla">
	<thead>
		<tr>
			<th id="tec_valoradas">0</th>
			<th>0</th>
			<th>0</th>
			<th>0</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>TECNOLOG&Iacute;AS VALORADAS</td>
			<td>POSIBLES PATENTES</td>
			<td>TECNOLOG&Iacute;AS EN EL MERCADO</td>
			<td>USUARIOS</td>
		</tr>
	</tbody>
</table>

1
  • 1
    Perfecto. Pero... ¿Cómo podría hacer para que cuando llegue a la sección de estadísticas se realice esa función?
    – Saco04
    el 22 jul. 2019 a las 20:26
0

Versión 1 estática ( sólo cuenta hasta 10 ) CSS + javascript :

  • nos enganchamos al evento on scroll del viewport ( para saber si la tabla está visible )
  • calculamos según el scroll ( wt ) la parte visible del viewport ( wb )
  • por cada elemento que tiene que contar de 0 a 10
  • calculamos la distancia del elemento desde el tope del viewport ( et )
  • calculamos los límites del elemento ( eb )
  • si no está aún visible ( et > wb + th ) ny = true
  • si ya dejó de estar visible ( eb < wt - th ) ap = true
  • th es un modificador en pixels para que arranque antes o después
  • si ya pasó o aún no está visible le sacamos la clase resaltado
  • caso contrario ( es visible en el viewport ) le agregamos la clase resaltado
  • La clase resaltado tiene adjunta una animación que va de 0 a 10 y queda en 10

$(document).ready(function() {
  var $elementos = $('.animacuenta');

  $(window).scroll(function() {
    // calculo de si el elemento es visible basado en:
    // https://github.com/luis-almeida/unveil/blob/master/jquery.unveil.js

    $w = $(window)
    wt = $w.scrollTop()
    th = 0
    wb = wt + $w.height()
    $elementos.each(function() {
      $el = $(this);
      et = $el.offset().top
      eb = et + $el.height()
      ny = et > wb + th
      ap = eb < wt - th
      if (ap || ny) {
        $el.removeClass('resaltado')
      } else {
        $el.addClass('resaltado')
      }

    });
  });
});
.muyalto {
  height: 140vh;
  background: #fafafa;
  padding: 10px;
}

.resaltado {
  background: #fe0;
}

@keyframes cuentaNumeros10 {
  0% {
    content: "0";
  }
  10% {
    content: "1";
  }
  20% {
    content: "2";
  }
  30% {
    content: "3";
  }
  40% {
    content: "4";
  }
  50% {
    content: "5";
  }
  60% {
    content: "6";
  }
  70% {
    content: "7";
  }
  80% {
    content: "6";
  }
  90% {
    content: "9";
  }
  100% {
    content: "10";
  }
}

.resaltado::after {
  content: "0";
  animation: cuentaNumeros10 10s linear forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class=muyalto>contenido anterior</div>
<table id="estadisticos_tabla">
  <thead>
    <tr>
      <th id="tec_valoradas" data-limite=10 class=animacuenta></th>
      <th>0</th>
      <th>0</th>
      <th>0</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TECNOLOG&Iacute;AS VALORADAS</td>
      <td>POSIBLES PATENTES</td>
      <td>TECNOLOG&Iacute;AS EN EL MERCADO</td>
      <td>USUARIOS</td>
    </tr>
  </tbody>
</table>
<div class=muyalto>contenido posterior</div>
<table id="otroestadisticos_tabla">
  <thead>
    <tr>
      <th id="otrotec_valoradas" data-limite=5 class=animacuenta></th>
      <th>0</th>
      <th>0</th>
      <th>0</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TECNOLOG&Iacute;AS VALORADAS</td>
      <td>POSIBLES PATENTES</td>
      <td>TECNOLOG&Iacute;AS EN EL MERCADO</td>
      <td>USUARIOS</td>
    </tr>
  </tbody>
</table>
<div class=muyalto>otro contenido posterior</div>


versión 2 ( CSS dinámico via javascript)

  • por cada elemento con clase animacuenta tomamos el data-limite
  • si no hay una animación que vaya de 0 a data-limite creamos una
  • esta animación reparte los números entre 0 y data-limite en keyframes que van de 0% a 100%
  • el css armado se inyecta en el <head>
  • en el evento on scroll se asigna la animación adecuada

Nota: le puse la duración de todas las animaciones a 1 segundo, si queres que suban cada una por segundo reemplazar ${$animDuracion}s por ${$max}s en la línea que empieza con

$anim += `.resaltado${$max}::after{content:"0";

próxima edición la versión inyectar el css via php

$(document).ready(function() {
  var $elementos = $('.animacuenta');
  var $estilos = [];
  var $animDuracion = 1;

  $elementos.each(function() {
    $el = $(this);
    $max = $el.data('limite')
    if (typeof undefined == typeof $estilos[$max]) {
      $anim = `@keyframes cuentaNumeros${$max} {`
      for (var $idx = 0; $idx <= $max; ++$idx) {
        $anim += `${Math.floor($idx/$max*100)}% {content:"${$idx}"} `;
      }
      $anim += '}';
      $anim += `.resaltado${$max}::after{content:"0";animation:cuentaNumeros${$max} ${$animDuracion}s linear forwards}`;
      $estilos[$max] = $anim;
    }
  });
  $("head").append($(document.createElement("style")).html($estilos))

  $(window).scroll(function() {
    // calculo de si el elemento es visible basado en:
    // https://github.com/luis-almeida/unveil/blob/master/jquery.unveil.js

    $w = $(window)
    wt = $w.scrollTop()
    th = 0
    wb = wt + $w.height()
    $elementos.each(function() {
      $el = $(this);
      $max = $el.data('limite')
      et = $el.offset().top
      eb = et + $el.height()
      ny = et > wb + th
      ap = eb < wt - th
      if (ap || ny) {
        $el.removeClass('resaltado' + $max)
      } else {

        $el.addClass('resaltado' + $max)
      }

    });
  });
});
.muyalto {
  height: 140vh;
  background: #fafafa;
  padding: 10px;
}

.animacuenta::after {
  text-align: center;
  font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class=muyalto>contenido anterior</div>
<table id="estadisticos_tabla">
  <thead>
    <tr>
      <th class=animacuenta data-limite=10></th>
      <th class=animacuenta data-limite=5></th>
      <th class=animacuenta data-limite=7></th>
      <th class=animacuenta data-limite=15></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TECNOLOG&Iacute;AS VALORADAS</td>
      <td>POSIBLES PATENTES</td>
      <td>TECNOLOG&Iacute;AS EN EL MERCADO</td>
      <td>USUARIOS</td>
    </tr>
  </tbody>
</table>
<div class=muyalto>contenido posterior</div>
<table id="otroestadisticos_tabla">
  <thead>
    <tr>
      <th id="otrotec_valoradas" class=animacuenta data-limite=5></th>
      <th class=animacuenta data-limite=3></th>
      <th class=animacuenta data-limite=7></th>
      <th class=animacuenta data-limite=1></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TECNOLOG&Iacute;AS VALORADAS</td>
      <td>POSIBLES PATENTES</td>
      <td>TECNOLOG&Iacute;AS EN EL MERCADO</td>
      <td>USUARIOS</td>
    </tr>
  </tbody>
</table>
<div class=muyalto>otro contenido posterior</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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