Contador cuenta atrás con jQuery

Hay recursos muy útiles para determinadas situaciones. Un ejemplo es el contador cuenta atrás. Está desarrollado con jQuery. Lo puedes aplicar por ejemplo, para cualquier promoción que quieras realizar en la página web, en vez de poner la promoción tal cual, lo lanzas antes con el contador, así provocas un efecto de interés.

Con FlipClock podrás crear fácilmente un contador cuenta atrás, uno normal o poner simplemente un reloj en tu web.

Contador cuenta atrás

 

¿Cómo añades este contador a tu web?

Te voy a mostrar mediante un ejemplo básico como implementar este contador de jQuery en tu web.

Se cargan los scripts

En el código html se insertarían las llamadas a los distintos scripts y css.

<html>
	<head>
		<link rel="stylesheet" href="/assets/css/flipclock.css">
	</head>
	<body>
		<div class="your-clock"></div>
		
		<script src="/assets/js/libs/jquery.js"></script>
		<script src="/assets/js/flipclock/flipclock.min.js"></script>
	</body>
</html>

 

Personalización

Si quieres personalizar tu contador solo tendrás que incluir más código dentro del ejemplo anterior. En el caso del contador cuenta atrás, el código a añadir sería:

<div class="clock"></div>

<script type="text/javascript">
	var clock = $('.clock').FlipClock(3600 * 24 * 3, {
		clockFace: 'DailyCounter',
		countdown: true
	});
</script>

 

Lo que te estoy comentando aquí es un pequeño avance, pero en la página oficial del autor podrás ver numerosos ejemplos, descargarte los archivos y ver distintas demos online de como funciona.

¿A dónde tienes que ir? A: https://github.com/objectivehtml/FlipClock

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio