Contador de tiempo en una página... casi sin código

No sé si interesa mucho o no, hacerles saber a nuestros lectores cuánto tiempo llevan perdido en una página nuestra. Lo digo porque si echaran cuentas, quizás cerrarían la ventana -o el navegador entero- y a lo mejor, se pondrían a hacer algo más provechoso ;)

Pero bueno, en cualquier caso, me ha gustado este truquillo que ví en el blog ¿Cómo se hace...? y por eso lo explico. La idea es poner un contador de tiempo que se inicia al cargar una página y actualizarlo segundo a segundo para mostrar el tiempo acumulado que se lleva en ella.

Allí nos proponen en primer lugar, un script para crear nuestro contador de permanencia. Lo de usar JavaScript es probablemente lo primero que nos vendría a la cabeza a la mayoría; pero lo que me ha parecido más ingenioso, ha sido la segunda opción que se propone y que prescinde de tener que crear una rutina. Como vemos, se puede conseguir lo mismo de una forma más sencilla y quizás más estética, con unos simples GIFs animados.

Tiempo que llevas leyendo esta entrada

Esto que habeis visto son 5 imágenes animadas, que incluyen los números y tiempos entre cuadros, necesarios para conseguir el efecto. De izquierda a derecha:

1. Dígitos del 0 al 5, con 600 segundos de retardo entre cuadros
2. Dígitos del 0 al 9, con 60 segundos de retardo entre cuadros
3. Dos puntos + cuadro en blanco, con 1 segundo de retardo entre cuadros
4. Dígitos del 0 al 5, con 10 segundos de retardo entre cuadros
5. Dígitos del 0 al 9, con 1 segundo de retardo entre cuadros

Que quede claro que el sistema del script es perfecto y este de las imágenes puede tener pequeños desajustes si nuestra conexión no es muy rápida o si el servidor de las imágenes está pesado. También, por cuestiones del caché, si tenemos varias ventanas abiertas con estas mismas imágenes, puede que veamos cosas raras. Por supuesto, nuestro contador no pasa de los 59 minutos, 59 segundos, pero ya sería raro que alguien estuviera una hora leyendo un post.

Lo que habría que teclear para conseguir este contador sería esto:

<div style="text-align: center;">Tiempo que llevas leyendo esta entrada</div>

<div style="margin: 0px auto; text-align: center; width: 150px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9eATZARVCUfKm9909Jh_7Ym6QAsXtaiv4hNr0ROBpXMHz1hOlKOVF0ZoR5T2gB3iBKSR999dyaJYl7yfFHAATDPtjFA7QqIXsOPFknEaWCEsGTFJH4oh_yCZrq1eJpRn8PBmlr0LmDP1y/" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrq4RdNkUfljQMK9mWEz4C_Ar-0JkHr67xhLuwHuwbSzbp5APWFqFy5jIC_FhyphenhyphenIZ25jrgI20a7X_hIfqC-ELbYPdN58LPwuAypPbffTfhMw6SqVrd4rw2YUes0YInxMJ1Qf3K-KDsxsxBx/" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5hqBvbERzu8uNjx1tCVff16b0CNhB9LRc3SAmi4OcnE3QR17Ih7Nsg2QxdV5ZKmsYvBHDi1vohUW-CdWPRIzyFxtJHObX-qDGHi07fzjaw8aHK0pjnzsEJdfSpE8oPJ_Gw01U-Y6l96Wg/" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii90EhdEzw7pUejBBK5LH6nnIJS33R9dg23z_aLcAfAx3ZxLtaNWVb_E5RRrjE_FlU9FjwtcMOdTz7CWVeAcEfrNfMP6LnUuGB1GD8LaO22ZmxnfzVexhEN9azVWT5LihCW3xXO0gwIZk0/" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-_9oFg_31ZnO0ESI6hLtaMgWZY9ZZISQqKYFeaoBNcnEfpQU5573mutuPVwbuYPsZnLMfZXCxQxIdSnJSiucMrzxyGSRX-qL2pX2owDIFGpw1OsOu7KKfmALiCOzGk7YGg8bCSf78QdF/" /></div>

Como siempre, lo conveniente es que bajeis las imágenes del ejemplo y tras alojarlas vosotros mismos, sustituyais las direcciones en el anterior ejemplo. También podeis crear vuestros propios GIFs para una personalización total.

No me digais que no es una solución creativa ¿o no?

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter