Fandom Developers Wiki
Advertisement

El script Countdown crea un reloj de cuenta regresiva en donde sea específicado.

¿Qué es lo que hace?[]

Usted puede crear un elemento con una fecha de objetivo a la página y este script lo remplazará dicha fecha con una cuenta regresiva hasta que el día/hora/minuto/segundo de esa fecha haya sido alcanzado.

Instalación[]

Crear una cuenta regresiva[]

Un reloj de cuenta regresiva puede ser añadida a una página usando el siguiente formato:

<span class="countdown" style="display:none;">Sólo <span class="countdowndate">January 01 2025 00:00:00</span> hasta el próximo año...</span>

El texto dentro de "countdown" sólo aparecerá si el reloj de cuenta regresiva está activo. Cualquier texto antes de "countdowndate" precederá a la cuenta regresiva, y cualquier texto después de "countdowndate" seguirá a la cuenta regresiva.

El ejemplo arriba produce:

(Ejemplo de reloj de cuenta regresiva)

Se puede usar un "span" opcional con la clase "nocountdown" como texto alternativo cuando el script de cuenta regresiva no funciona o mientras se está cargando.

  • p.ej. Usando <span class="nocountdown">¡Ya casi es el año nuevo!</span> resulta en
    "¡Ya casi es el año nuevo!" cuando el script cargue.

Este span debe colocarse directamente después del código de cuenta atrás anterior.

Zonas horarias[]

Se pueden usar dos métodos para hacer que la cuenta regresiva corra en función de una zona horaria específica. Lo más fácil es agregar el identificador de zona horaria al final del código. Por ejemplo, para realizar una cuenta regresiva para la hora estándar del este (EST):

<span class="countdowndate">January 01 2025 00:00:00 EST</span>

Si bien este método funciona con la mayoría de los identificadores, no funciona con "algunas" variantes de horario de verano (p.ej. Horario de verano británico - BST).

Un método alternativo y más confiable es agregar el desplazamiento del Tiempo Universal Coordinado (UTC) al final del código. Por ejemplo, para realizar una cuenta regresiva para EST, que tiene un desplazamiento de -5 horas:

<span class="countdowndate">January 01 2025 00:00:00 -0500</span>

Tenga en cuenta que los cambios hacia y desde el horario de verano no se realizan automáticamente, y deben ser realizados por el usuario, ya sea con el identificador de horario de verano o mediante el desplazamiento UTC.

Opciones[]

Finalizando la cuenta regresiva[]

¿Cómo quieres que termine la descarga? Hay cinco opciones:

  1. contando desde cero: este es el valor predeterminado por motivos de compatibilidad
  2. eliminación del contenedor de cuenta regresiva
  3. deteniendo la cuenta regresiva en cero
  4. reemplazando la cuenta regresiva con algo más
  5. llamando a una función de JavaScript personalizada de su elección

Contando desde cero[]

Ya que esta es la opción predeterminada, no necesitas hacer nada.

Eliminar contenedor[]

Agregue el atributo data-end con el valor "remove" en el contenedor:

<span data-end="remove" class="countdown" style="display:none;"><!--
-->Sólo <span class="countdowndate">January 01 2025 00:00:00</span> hasta el próximo año...<!--
--></span>

Parar[]

Agregue el atributo data-end con el valor "stop" en el contenedor:

<span data-end="stop" class="countdown" style="display:none;"><!--
-->Sólo <span class="countdowndate">January 01 2025 00:00:00</span> hasta el próximo año...<!--
--></span>

Remplazamiento[]

Añada el atributo data-end con el valor "toggle" en el contenedor. Adicionalmente tendrás que agregar el atributo data-toggle con el selector que señala al remplazo:

<span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;"><!--
-->Sólo <span class="countdowndate">January 01 2025 00:00:00</span> hasta el próximo año...<!--
--></span><span class="post-countdown" style="display:none;">Happy 2025!</span>

Nótese el punto en el atributo data-toggle! El valor esperado es un selector/clase de CSS o jQuery. Así que ".name" para clases, "#name" para IDs, etc.

Alternativamente, si el contenedor de cambio es el siguiente después del contador, el valor especial data-toggle="next" se puede utilizar en su lugar, sin necesidad de especificar ningún selector. Esto es útil cuando se utilizan cuentas regresivas múltiples como parte de una plantilla, por ejemplo.

Llamada JS personalizada[]

Añada el atributo data-end con el valor "callback" en el contenedor. Adicionalmente tendrás que añadir el atributo data-callback con el nombre de la función que quieras llamar:

<span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;"><!--
-->Sólo <span class="countdowndate">January 01 2025 00:00:00</span> hasta el próximo año...<!--
--></span>

La cuenta regresiva se detendrá en cero y luego llamará a su función. El contenedor de cuenta regresiva será this objeto de la función.

Para que la función esté disponible para el módulo Countdown, deberá agregarla al módulo en sí:

window.countdownTimer = {
    myFunction: function () {
       $(this).text("Happy 2025!");
    }
}

Ceros a la izquierda[]

Por defecto se mostrarán ceros a la izquierda:

0 días, 0 horas, 10 minutos y 10 segundos

Si prefieres esto en su lugar:

10 minutos y 10 segundos

necesitarás añadir el atributo data-options con el valor "no-leading-zeros":

<span data-options="no-leading-zeros" class="countdown" style="display:none;"><!--
-->Sólo <span class="countdowndate">January 01 2025 00:00:00</span> hasta el próximo año...<!--
--></span>

Versión corta[]

Si prefiere mostrar la cuenta regresiva en su versión corta como 2d 5h 30m 1s en lugar de las palabras completas, debe agregar el atributo data-options con el valor "short-format".

Si ya tienes establecido el atributo data-options, añada todas las opciones separándolas en espacios:

<span data-options="no-leading-zeros short-format" class="countdown" style="display:none;"><!--
-->Sólo <span class="countdowndate">January 01 2025 00:00:00</span> hasta el próximo año...<!--
--></span>

Contenido dinámico[]

Este script admite contenido dinámico insertado, como comentarios de artículos o vistas previas del editor. Sin embargo, si inserta un contador a través de JavaScript, debe activar este evento después de insertarlo:

mw.hook("wikipage.content").fire($("ELEMENT"));

Donde ELEMENT es un selector del elemento en el que se ha insertado el contador.

Changelog[]

Date Description Author
July 7, 2011 Added code to allow the definition of singular and plural forms of time. Eladkse
January 31, 2012 Added localisation code by Dantman. Eladkse
June 28, 2012 Simplified singular/plural code. Eladkse
December 9, 2012 Complete rewrite and addition of a few options. Pecoes
June 15, 2017 Dynamic content support. Jorgemg14
October 21, 2017 Added short format option. Jorgemg14
Advertisement