Days
Hours
Minutes
Seconds

Features:

- counts time till exact date;
- has custom skin designs.

## Description

Files needed to work with the timer:

- jquery-1.7.1.min.js – jQuery library (the timer will work with this version of library only);
- jquery.countdown.min.js – the timer functionality;
- demo.css – the set of CSS styles for the timer stylization.

Please include the following files in the <head> section of HTML file to start working with the timer:

    <link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.countdown.min.js"></script>

The HTML Timer Structure:

    <div id="counter"></div>
    <div class="counter_desc">
    	<div class="days">Days</div>
    	<div class="hours">Hours</div>
    	<div class="minutes">Minutes</div>
    	<div class="seconds">Seconds</div>
    </div>

## Initialization

You can find code for the timer initialization in the end of the jquery.countdown.min.js file:

    $(document).ready(function(){
    	var _date=new Date()
    		,countdown_to={
    			year:2013
    			,month:6
    			,date:13
    			,hours:0
    			,minutes:15
    			,seconds:00
    		}

    	_date.setFullYear(countdown_to.year,countdown_to.month,countdown_to.date)
    	_date.setHours(countdown_to.hours)
    	_date.setMinutes(countdown_to.minutes)
    	_date.setSeconds(countdown_to.seconds)

    	/*code for demonstration*/
    	_date=new Date()
    	_date.setMonth(_date.getMonth()+8)
    	/*end code for demonstration*/

    	$('#counter').countdown({
    		image: 'images/digits_inverted.png',
    		startTime: _date,
    		stepTime: 35
    	});
    });

The initialization occurs on the event $(document).ready().

Parameters:

- image – shows path to the image which will be used as a skin (the directory images contains files that you can use as skins for the timer);
- startTime – sets the final date of the countdown. Time countdown is implemented with the help of variable _date;
- stepTime – sets cycle rate of numbers’ animation.

The demo version shows the time that remains from the current date plus 8 months. That is why timer starts a new countdown every time you refresh the demo page. Here is a code where you can edit these parameters:

    	/*code for demonstration*/
    	_date=new Date()
    	_date.setMonth(_date.getMonth()+8)
    	/*end code for demonstration*/

If you want to set exact date, you should change variable _date. To do this you must change values for year, month(pay attention that months’ numbering starts from zero), date, hours, minutes, seconds. Here is a piece of code where you can change these parameters:

    $(document).ready(function(){
    	var _date=new Date()
    		,countdown_to={
    			year:2013
    			,month:6
    			,date:13
    			,hours:0
    			,minutes:15
    			,seconds:00
    		}
    });

Also you have to delete the following code:

    	/*code for demonstration*/
    	_date=new Date()
    	_date.setMonth(_date.getMonth()+8)
    	/*end code for demonstration*/

## Color themes

Below you’ll find examples of skin solutions for the timer. All these skins you can find in images directory.

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits_inverted.png',
    });

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits.png',
    });

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits2.png',
    });

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits2_blue.png',
    });

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits2_green.png',
    });

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits2_orange.png',
    });

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits2_purple.png',
    });

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits2_red.png',
    });

Days
Hours
Minutes
Seconds

    $('#counter').countdown({
    	image: 'images/digits2_yellow.png',
    });