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
    Commented el 22 jul. 2019 a las 20:13
  • Que se vaya aumentando el número cada medio segundo, o cada segundo.
    – Saco04
    Commented el 22 jul. 2019 a las 20:15
  • Si lo que quieres es un contador en linea debes usar ajax con setInterval
    – oegpyg
    Commented 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
    Commented el 22 jul. 2019 a las 20:15
  • No sé cómo usarlo en este caso. Lo he intentado, pero sigue sin funcionar.
    – Saco04
    Commented 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
    Commented 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

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.