Countdown con Mootools

Podríamos utilizar el plugin Countdown de Mootools por ejemplo para poner una página inicial con publicidad o condiciones de acceso que tras x tiempo se redirija al contenido de la Web.

Con lo que se va a explicar en este tutorial conseguiremos disponer de un script para realizar una cuenta atrás con efectos y tras finalizar dicha cuenta se realice alguna acción.

Será necesario incluir en nuestro <head> los scripts de mootools necesarios:

<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/more.js"></script>
<script type="text/javascript" src="js/MooCountdown.js"></script>

También en el <head> deberemos incluir la llamada al contador de Mootools de la siguiente forma:

<script type="text/javascript">

      window.addEvent('domready', function() {

        new MooCountdown({
          futureDate:'10',
          onlySeconds:true,
          container:'countdownSeconds',
          onComplete: function() {
            alert('Countdown !');
          }
        });

      });

    </script>

Como vemos, le estamos indicando que la cuenta atrás se inicia en 10 segundos, mostramos solo segundos, el div contenedor de la cuenta atrás tiene id=»countdownSeconds» y que tras completar la cuenta se ejecute un alert. Se podría emplear para acciones más sotisficadas pero eso ya queda en vuestras manos.

Después en el <body> queda algo muy simple y limpio:

<div id="countdownSeconds"></div>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (No hay votos)
Cargando…
Comparte en las redes sociales

Una respuesta a “Countdown con Mootools”

  1. Orval Abeln dice:

    I was honored to get a call coming from a friend as soon as he found out the important ideas shared on your own site. Reading through your blog post is a real amazing experience. Many thanks for taking into consideration readers like me, and I want for you the best of achievements like a professional in this field.

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre