FANDOM


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;">Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...</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 es casi año nuevo!</span> resulta en
    "Ya es casi año nuevo" cuando el script cargue.

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

Zonas horarias

Usando el código de ejemplo anterior, la cuenta regresiva funciona en relación con el horario del sistema del lector. Si bien esto puede ser útil en casos como la cuenta regresiva para el nuevo año, no es muy útil en otros.

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 2021 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 2021 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;">Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...</span>

Parar

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

<span data-end="stop" class="countdown" style="display:none;">Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...</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;">Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...</span><span class="post-countdown" style="display:none;">Happy 2021!</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;">Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...</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 2021!');
    }
}

Ceros a la izquierda

Por defecto se mostrarán ceros a la izquierda:

0 days, 0 hours, 10 minutes and 10 seconds

Si prefieres esto en su lugar:

10 minutes and 10 seconds

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;">Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...</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;">Only <span class="countdowndate">January 01 2021 00:00:00</span> until the new year...</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.

Localización

Los mensajes localizados se pueden agregar usando este código de idioma como clave y luego creando un objeto para los mensajes. Vea el siguiente ejemplo para anular los mensajes predeterminados utilizados para el idioma inglés.

countdownTimer.translations = { 
    en: {
        and: 'and',
        second: 'second',
        seconds: 'seconds',
        minute: 'minute',
        minutes: 'minutes',
        hour: 'hour',
        hours: 'hours',
        day: 'day',
        days: 'days'
    }
};

Añadir traducciones

El script requiere los equivalentes locales de los siguientes intervalos de tiempo:

  • second/seconds
  • minute/minutes
  • hour/hours
  • day/days

Además, se requiere la versión localizada de "and".

Si desea ayudar, publique traducciones para estos en la página de discuciones del script (o agréguelos a MediaWiki:Countdown/code.js directamente si se siente cómodo al hacerlo)

Actualizaciones importantes

Octubre 21, 2017
Jorgemg14: versión corta añadida
Junio 15, 2017
Jorgemg14: añadido el soporte para contenido dinámico
Diciembre 9, 2012
Pecoes: re-escritura de código completa y adición de algunas opciones
Junio 28, 2012
Eladkse: código para "singular/plural" simplificado.
Enero 31, 2012
Eladkse: código de localización agregado por Dantman.
Julio 7, 2011
Eladkse: código agregado para permitir la definición de formas de tiempo singulares y plurales.
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+