jQuery Countdown Timer & Digital Clock Plugin - timeTo

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

How to Use

Add the css below to your html page

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

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>

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>