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: MIT
   

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

This awesome jQuery plugin is developed by Lexxus. For more Advanced Usages, please check the demo page or visit the official website.