JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div class="atimer" data-timer-till="2014-09-17T15:00:00"><b>[d]</b> <em>days</em> : <b>[h]</b> <em>hrs</em> : <b>[m]</b> <em>mins</em> : <b>[s]</b> <em>secs</em></div>

JavaScript

(function ($) {
        
        $.fn.timer = function (options) {
            var settings = $.extend({
                template: "<span><b>[d]</b> <em>days</em></span><span> : </span><span><b>[h]</b> <em>hrs</em></span><span> : </span><span><b>[m]</b> <em>mins</em></span><span> : </span><span><b>[s]</b> <em>secs</em></span>" //default output template (used if elements innerhtml is empty)
            }, options);    
             
            return this.each(function () {
                
                var el = $(this),
                    timer_till = el.data("timer-till"),
                    template = el.html() || settings.template,
                    target_date = new Date(timer_till).getTime(),
                    days, hours, minutes, seconds;
                
                function tick(){
                    // find the amount of "seconds" between now and target
                    var current_date = new Date().getTime();
                    var seconds_left = (target_date - current_date) / 1000;  
                    
                    // do some time calculations
                    days = parseInt(seconds_left / 86400);
                    seconds_left = seconds_left % 86400;
                     
                    hours = parseInt(seconds_left / 3600);
                    seconds_left = seconds_left % 3600;
                     
                    minutes = parseInt(seconds_left / 60);
                    seconds = parseInt(seconds_left % 60);
                     
                    // format countdown string
                    el.html("<p>"+days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s"+"</p>");
                    el.html(template.replace("[d]",days).replace("[h]",hours).replace("[m]",minutes).replace("[s]",seconds));
                }
                tick();
                setInterval(tick, 1000);
                
                    
                
            });
            
        };

    }(jQuery));
   ...