Customizable & Themeable jQuery Countdown Plugin - dsCountDown

dsCountDown is a simple jQuery plugin for creating a customizable & themeable countdown timer which supports both local and server time (PHP script required). The plugin has the ability to count down in days, hours, minutes, and seconds to any time defined in the javascript.

How to use it:

1. Include jQuery javascript library and jQuery dscountdown plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="dscountdown.js"></script>

2. Create a container for the countdown timer.

<div class="countdown"></div>

3. Load the required stylesheet file for the basic style and theme styles.

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

4. Call the plugin and set the end date you want to count down in the javascript.

<script>
jQuery(document).ready(function($){
$('.demo1').dsCountDown({
endDate: new Date("December 24, 2020 23:59:00")
});
});
</script>

5. Available options.

<script>
jQuery(document).ready(function($){
$('.countdown').dsCountDown({
startDate: new Date(), // Date Object of starting time of count down, usualy now (whether client time or given php time)
endDate: new Date("December 24, 2020 23:59:00")
elemSelDays: '', // Leave blank to use default value or provide a string selector if the lement already exist, Example: .ds-days
elemSelHours: '', // Leave blank to use default value or provide a string selector if the lement already exist, Example: .ds-hours
elemSelMinutes: '', // Leave blank to use default value or provide a string selector if the lement already exist, Example: .ds-minutes
elemSelSeconds: '', // Leave blank to use default value or provide a string selector if the lement already exist, Example: .ds-seconds
theme: 'white', // Set the theme 'white', 'black', 'red', 'flat', 'custom'
titleDays: 'Days', // Set the title of days
titleHours: 'Hours', // Set the title of hours
titleMinutes: 'Minutes', // Set the title of minutes
titleSeconds: 'Seconds', // Set the title of seconds
onBevoreStart: null, // callback before the count down starts
onClocking: null, // callback after the timer just clocked
onFinish: null// callback if the count down is finish or 0 timer defined
});
});
</script>

5. Custom or create a new theme in the CSS to fit your needs.

---

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