How To Use DownCount Time In Your HTML Template

HTML:

<ul class="live-auctions-countdown flex-wrap d-flex justify-content-center">
    <li class="align-items-center flex-column d-flex justify-content-center">
        <span class="days">00</span>
        <p>Days</p>
    </li>
    <li class="align-items-center flex-column d-flex justify-content-center">
        <span class="hours">00</span>
        <p>Hours</p>
    </li>
    <li class="align-items-center flex-column d-flex justify-content-center">
        <span class="minutes">00</span>
        <p>Mins</p>
    </li>
    <li class="align-items-center flex-column d-flex justify-content-center">
        <span class="seconds">00</span>
        <p>Secs</p>
    </li>
</ul>

CSS:

.live-auctions-countdown {
    position: absolute;
    padding-top: 20px;
    padding-bottom: 15px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: linear-gradient(90.03deg, rgba(0, 0, 0, 0.5) 2.49%, rgba(0, 0, 0, 0.5) 116.75%);
    backdrop-filter: blur(4px);
    text-align: center;
    border-radius: 5px;
    padding-left: 0;
    li {
        position: relative;
        margin: 0 8px;
        span {
        height: 40px;
        width: 45px;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
        color: $white-color;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background-color: #0a0a0a;
        border-radius: 5px;
        padding: 7px;
        display: inline-block;
        }
        p {
            font-size: 11px;
            color: #ffffff;
        }
        &::before {
            position: absolute;
            content: '';
            height: 3px;
            width: 3px;
            background-color: #ffffff;
            border-radius: 100%;
            right: -12px;
            top: 15px;
        }
        &::after {
            position: absolute;
            content: '';
            height: 3px;
            width: 3px;
            background-color: #ffffff;
            border-radius: 100%;
            right: -12px;
            top: 24px;
        }
        &:last-child {
            margin-right: 0;
            &::before {
                display: none;
            }
            &::after {
                display: none;
            }
        }
        &:first-child {
            margin-left: 0;
        }
    }
}

CUSTOM JS:

$('.live-auctions-countdown').downCount({
        date: '08/27/2023 12:00:00',
        offset: -5
    }, function () {
        alert('WOOT WOOT, done!');
});

JS LIBRARY:

downCount.js

(function ($) {

    $.fn.downCount = function (options, callback) {
        var settings = $.extend({
                date: null,
                offset: null
            }, options);

        // Throw error if date is not set
        if (!settings.date) {
            $.error('Date is not defined.');
        }

        // Throw error if date is set incorectly
        if (!Date.parse(settings.date)) {
            $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
        }

        // Save container
        var container = this;

        /**
         * Change client's local date to match offset timezone
         * @return {Object} Fixed Date object.
         */
        var currentDate = function () {
            // get client's current date
            var date = new Date();

            // turn date to utc
            var utc = date.getTime() + (date.getTimezoneOffset() * 60000);

            // set new Date object
            var new_date = new Date(utc + (3600000*settings.offset))

            return new_date;
        };

        /**
         * Main downCount function that calculates everything
         */
        function countdown () {
            var target_date = new Date(settings.date), // set target date
                current_date = currentDate(); // get fixed current date

            // difference of dates
            var difference = target_date - current_date;

            // if difference is negative than it's pass the target date
            if (difference < 0) {
                // stop timer
                clearInterval(interval);

                if (callback && typeof callback === 'function') callback();

                return;
            }

            // basic math variables
            var _second = 1000,
                _minute = _second * 60,
                _hour = _minute * 60,
                _day = _hour * 24;

            // calculate dates
            var days = Math.floor(difference / _day),
                hours = Math.floor((difference % _day) / _hour),
                minutes = Math.floor((difference % _hour) / _minute),
                seconds = Math.floor((difference % _minute) / _second);

                // fix dates so that it will show two digets
                days = (String(days).length >= 2) ? days : '0' + days;
                hours = (String(hours).length >= 2) ? hours : '0' + hours;
                minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
                seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

            // based on the date change the refrence wording
            var ref_days = (days === 1) ? 'day' : 'days',
                ref_hours = (hours === 1) ? 'hour' : 'hours',
                ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
                ref_seconds = (seconds === 1) ? 'second' : 'seconds';

            // set to DOM
            container.find('.days').text(days);
            container.find('.hours').text(hours);
            container.find('.minutes').text(minutes);
            container.find('.seconds').text(seconds);

            container.find('.days_ref').text(ref_days);
            container.find('.hours_ref').text(ref_hours);
            container.find('.minutes_ref').text(ref_minutes);
            container.find('.seconds_ref').text(ref_seconds);
        };
        
        // start
        var interval = setInterval(countdown, 1000);
    };

})(jQuery);

You can use this code to make your website beautiful. Below is a sequence of codes for how to use them.

So Let,s Go !

Leave a Reply

Your email address will not be published.