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. The primary features of Countdown Timer & Digital Clock Plugin:
- Use as a clock
- Use as a timer
- Use as a countdown
- Themeable using pure CSS
- Clean & Dry Syntax
- Abstract everything into reusable objects
- Full-Featured Developer API to create custom “Clock Faces”
Live Demo
1. Set countdown in seconds with callback
2. Hide hours
3. Set countdown to specified date-time
4. Set captions and dark theme
5. Digital clock
6. Digital clock with Step Setting and Step Callback
How to Use
1. CSS
Add the css below to your html page
<link href="timeTo.css" type="text/css" rel="stylesheet"/>
2. HTML
Create a container where you want to render clock
<h3>Set countdown in seconds with callback</h3>
<div id="countdown-1"></div>
<p><button id="reset-1" type="button">Reset this timer</button></p>
<h3>Hide hours</h3>
<div id="countdown-11"></div>
<h3>Set countdown to specified date-time</h3>
<div id="countdown-2"><span id="date-str"></span></div>
<h3>Set captions and dark theme</h3>
<div id="countdown-3"><span id="date2-str"></span></div>
<br /><br />
<h3>Digital clock</h3>
<div id="clock-1"></div>
<h3>Digital clock with Step Setting and Step Callback</h3>
<div id="clock-w-step-cb"></div>
3. Javascript
Load jQuery library together with the Countdown Timer & Digital Clock library into your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.time-to.js"></script>
<script>
/**
* Set timer countdown in seconds with callback
*/
$('#countdown-1').timeTo(120, function () {
alert('Countdown finished');
});
$('#reset-1').click(function () {
$('#countdown-1').timeTo('reset');
});
/**
* Hide hours
*/
$('#countdown-11').timeTo({
seconds: 100,
displayHours: false
});
$('#clock-w-step-cb').timeTo({
step: function () {
console.log('Executing every 3 ticks');
},
stepCount: 3
});
var date = getRelativeDate(2);
document.getElementById('date-str').innerHTML = date.toISOString();
/**
* Set timer countdown to specyfied date
*/
$('#countdown-2').timeTo(date);
var time = '23:59:54';
document.getElementById('date2-str').innerHTML = time;
/**
* Set theme and captions
*/
$('#countdown-3').timeTo({
time: time,
displayDays: 2,
theme: "black",
displayCaptions: true,
fontSize: 48,
captionSize: 14,
lang: 'es'
});
/**
* Simple digital clock
*/
$('#clock-1').timeTo();
function getRelativeDate(days, hours, minutes) {
var d = new Date(Date.now() + 60000 /* milisec */ * 60 /* minutes */ * 24 /* hours */ * days /* days */ );
d.setHours(hours || 0);
d.setMinutes(minutes || 0);
d.setSeconds(0);
return d;
}
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.