Esta es una herramienta basada en JavaScript que utiliza el objeto de lienzo para animar dibujos definidos por SVG. La herramienta utiliza una animación de volteo para mostrar el tiempo restante para o el tiempo transcurrido desde una fecha objetivo. La herramienta detecta el cambio de ancho y alto de su objeto contenedor y responde en consecuencia. Dado que utiliza datos vectoriales para dibujar los dígitos y los paneles de la cuenta regresiva, no hay cambios en la calidad de los dibujos que se muestran cuando se cambia el tamaño. La herramienta presenta alrededor de 30 opciones para personalizar, pero también se puede usar en una configuración simple.
1. Para poder jugar, la herramienta debe ejecutarse en un div que esté en una posición relativa o absoluta, porque la herramienta crea capas de objetos de lienzo dentro del div que están en una posición absoluta. El div debe tener un atributo de identificación para poder seleccionarlo fácilmente. El div puede tener un ancho definido con valores porcentuales. La herramienta detectará cada cambio de tamaño del navegador y se redibujará en consecuencia. La altura del div no es importante, porque la herramienta la cambiará para dibujar la cuenta regresiva. Sin embargo, hay un parámetro que define la altura máxima que puede tener la herramienta. Aquí hay un ejemplo de un objeto div que se puede usar:
<div id="first_countdown" style="position: relative; width: 100%; height: 50px;"></div>
2. Una vez que haya creado el elemento div, deberá importar algunos archivos Javascript. Estos son jQuery y el complemento de cuenta regresiva. En mis demostraciones, los agrego en el encabezado del documento.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.responsive_countdown.min.js"></script>
3. Por último, debe seleccionar el elemento div y ejecutar la cuenta regresiva. Es posible no especificar ninguna opción y se utilizarán las predeterminadas.
<script>
jQuery(document).ready(function($){
$('#first_countdown').ResponsiveCountdown();
});
</script>
- Cuenta regresiva / cuenta ascendente.
- Comportamiento receptivo. La herramienta escala según el ancho disponible.
- Herramienta visual que lo ayuda a crear su cuenta regresiva única.
- Infinitas combinaciones de colores. Color sólido para los dígitos. Color degradado para los paneles.
- Mostrar ocultar grupos.
- Dos modos de perspectiva.
- Dos conjuntos de dígitos. Tres juegos de paneles.
- Configuración de la zona horaria.
- Configuración de leyendas de etiquetas.
- Configuración de la fuente y el tamaño de las etiquetas.
- Espaciado de grupos. Divisor de grupos: círculos o cuadrados.
- Uso de configuraciones de tiempo provenientes de un servidor. La sincronización tiene lugar solo durante la inicialización de la herramienta.
- Modo personalizado, que permite configurar los dígitos mediante el uso de un método público.
fomonkey
Razón principal: Atención al cliente
Comentarios adicionales del comprador: Si está buscando la mejor cuenta regresiva, ¡aquí está! Probé 8 versiones diferentes de esta biblioteca, la compré y la propia. Esto fue súper simple de instalar y muy fácil de diseñar tal como lo necesitaba. Para colmo, realmente necesitaba una ligera variación en los colores de los números y el desarrollador respondió en una hora y proporcionó el código revisado. chrisdean es un autor fantástico 5 ESTRELLAS. ¡Gracias!
kryten68
Razón principal: Calidad de diseño
Comentarios adicionales del comprador: ¡Magnífico!
diseñochillgeeks
Razón principal: Atención al cliente
Comentarios adicionales del comprador: Impresionante documentación con atención al cliente instantánea. Recomendaría esto a todos. ¡Lo he usado en una aplicación móvil, funciona de maravilla!
OneManTraje
Razón principal: Atención al cliente
Comentarios adicionales del comprador: El mejor contador de cuenta regresiva que existe. Muchas gracias.
ACTUALIZAR [18 MAR 2015]
Nueva opción añadida – f_weight. Corrección de problemas en modo personalizado.
ACTUALIZAR [24 MAR 2014]
Se eliminó un pequeño problema relacionado con las etiquetas.
ACTUALIZAR [20 MAR 2014]
Se eliminó el problema de manejo de eventos de la fecha objetivo alcanzada.
ACTUALIZAR [11 MAR 2014]
Nueva función agregada: uso de la configuración de la hora del servidor.
Nueva característica agregada: modo personalizado.
Mejor manejo de visualización de etiquetas.
ACTUALIZAR [13 FEB 2014]
Nueva función agregada: espaciado de grupos.
Nueva función agregada: divisor de grupos («ninguno», «cuadrados», «círculos»).
Posibilidad de activar/desactivar el efecto de brillo detrás de las etiquetas.
ACTUALIZAR [10 FEB 2014]
Error menor corregido en index.html, relacionado con bgr_color.
Se solucionó un problema con el manejo completo de eventos.
