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!
(0 votos, promedio: NAN de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

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 una respuesta

Tu dirección de correo electrónico no será publicada.

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

Ver más sobre