jQuery Countdown Timer & Digital Clock Plugin - timeTo

jQuery Countdown Timer & Digital Clock Plugin - timeTo
File Size: 43.2KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

timeTo is an easy-to-use and high customizable jQuery plugin for creating Countdown Timers or Digital Clocks with a lot of options and Callback support.

Related Plugins:

Basic Usage:

1. Include timeTo CSS to style the plugin

<link href="timeTo.css" type="text/css" rel="stylesheet"/>

2. Create a container for your countdown timer or digital clock

<div id="demo"></div>

3. Include jQuery library and timeTo plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="jquery-1.9.1.min.js"><\/script>')</script> 
<script src="jquery.timeTo.js"></script> 

4. The javascript

<script>

// Set timer countdown in seconds with callback

$('#demo').timeTo(100, function(){
    alert('Countdown finished');
});

var date = getRelativeDate(20);

document.getElementById('date-str').innerHTML = date.toString();


// Set timer countdown to specyfied date

$('#demo').timeTo(date);

date = getRelativeDate(7, 9);
document.getElementById('date2-str').innerHTML = date.toString();


// Set theme and captions

$('#countdown-3').timeTo({
    timeTo: date,
    theme: "black",
    displayCaptions: true,
    fontSize: 48,
    captionSize: 14
});


// Simple digital clock

$('#demo').timeTo();

function getRelativeDate(days, hours, minutes){
    var date = new Date(Date.now() + 60000 /* milisec */ * 60 /* minutes */ * 24 /* hours */ * days /* days */);

    date.setHours(hours || 0);
    date.setMinutes(minutes || 0);
    date.setSeconds(0);

    return date;
}
</script>

5. All the default options.

callback: null,          // callback function for exec when timer out
captionSize: 0,          // font-size by pixels for captions, if 0 then calculate automaticaly
countdown: true,         // is countdown or real clock
countdownAlertLimit: 10, // limit in seconds when display red background
displayCaptions: false,  // display captions under digit groups
displayDays: 0,          // display day timer, count of days digits
displayHours: true,      // display hours
fontFamily: "Verdana, sans-serif",
fontSize: 28,            // font-size of a digit by pixels
lang: 'en',              // language of caption
seconds: 0,              // timer's countdown value in seconds
start: true,             // true to start timer immediately
theme: "white",          // 'white' or 'black' theme fo timer's view

vals: [0, 0, 0, 0, 0, 0, 0, 0, 0],  // private, current value of each digit
limits: [9, 9, 9, 2, 9, 5, 9, 5, 9],// private, max value of each digit
iSec: 8,            // private, index of second digit
iHour: 4,           // private, index of hour digit
tickTimeout: 1000,  // timeout betweet each timer tick in miliseconds
intervalId: null    // private

Change log:

v1.0.13 (2014-01-17)

  • add portugal language

v1.0.12 (2013-12-16)

  • bug fix

v1.0.11 (2013-12-12)

  • update to the latest version.

v1.0.10 (2013-12-10)

  • update to the latest version.

v1.0.9 (2013-12-08)

  • fix case when jQuery global variable is not defined

v1.0.8 (2013-11-07)

  • add "displayHours" option;

v1.0.6 (2013-08-27)

  • change option displayDays to integer means count of display days digits

For more Advanced Usages, please check the demo page or visit the official website.