JSFiddle - React, Tailwind, and code Playground

by javad ebrahimi

HTML

<script>


</script>
<div>
  Registration closes in <span id="timer"></span> minutes!
</div>

JavaScript

(function ($) {

    $.fn.countdown = function (methodOrOptions) {
        if (timer[methodOrOptions]) {
            return timer[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
            return timer.init.apply(this, arguments);
        }
    };

    // default Options
    var defaults = {
        time: "00:00",
        callback: $.noop()
    };

    var setting, loop;

    var timer = {
        init: function (options) {

            setting = $.extend(defaults, options);

            timeObj = setting.time.split(":");
            var hou = parseInt(timeObj[0]);
            var sec = parseInt(timeObj[1]);

            loop = setInterval($.proxy(function () {

                if (sec == 0) {
                    if (hou == 0) {
                        timer.stop();
                        return true;
                    } else {
                        hou--;
                        sec = 60;
                    }
                }
                sec--;
                $(this).html((hou > 9 ? hou : "0" + hou) + " : " + (sec > 9 ? sec : "0" + sec));

            }, this), 500);

        },
        stop: function () {
            clearInterval(loop);
            setting.callback.call(this);
        }

    }

})(jQuery);