Add thousandths to jquery counter

Question

I have a Javascript code that makes a counter Days / Hours / Minutes / Seconds . I just need him to count the thousandths, but I have little knowledge in javascript and I don’t know how to increase this option. The code that counts above is as follows::

(function($) {
    $.fn.countdown = function(options) {
        var settings = { 'date': null };
        if(options) {
            $.extend(settings, options);
        }

        this_sel = $(this);

        function count_exec() {
            eventDate = Date.parse(settings['date']) / 1000; // Parse the date string
            currentDate =   Math.floor($.now() / 1000); // Find the timestamp for now
            seconds = eventDate - currentDate; // Find the number of seconds remaining
            if (seconds <= 0) { // After the event date has passed
                days = 0;
                hours = 0;
                minutes = 0;
                seconds = 0;
                milese = 0;

            } else {
                days =          Math.floor(seconds / (60 * 60 * 24));       // Divide to find the number of days remaining
                seconds -=      days * 60 * 60 * 24;                        // Subtract the number of (complete, => 24 hours) days calculated above

                hours =         Math.floor(seconds / (60 * 60));            // Get the number of hours from that modified number ^
                seconds -=      hours * 60 * 60;

                minutes =       Math.floor(seconds / 60);
                seconds -=      minutes * 60;



            }
            this_sel.find('#days').val(days).trigger('change');
            this_sel.find('#hours').val(hours).trigger('change');
            this_sel.find('#mins').val(minutes).trigger('change');
            this_sel.find('#secs').val(seconds).trigger('change');
            this_sel.find('#mile').val(milese).trigger('change');

        } // End of count_exec();

        count_exec();

        interval = setInterval(count_exec, 1000);

    } // End of the main function
}) (jQuery);

The variable milese and #Mile it was I who created to put the thousandths, but I did not give continuity because I did not understand the logic of the original code.

Answer 1

The logic of this plugin is not the clearest, but if you look well, it keeps the desired date (eventDate) and the current date (currentDate) in seconds when dividing the original values by 1000.

To add milliseconds, just stop dividing by 1000 and change existing code to make calculations based on milliseconds. Basically just multiply by 1000 in several places and include your new variable millis in those accounts.

You also need to change the timer (in setInterval()) to run faster. I just don’t recommend running every 1 millisecond because it’s much faster than the browser can process and that we can distinguish. For the browser the minimum range is between 4ms and 10ms. I used 50ms below.

Here’s the code I changed:

(Function($) { $.fn.Countdown = Function(options) { var Settings = { 'date': null }; if(options) { $. extend(Settings, options); }

        this_sel = $(this);

        function count_exec() {
            var eventDate = Date.parse(settings['date']); // Parse the date string
            var currentDate = $.now(); // Find the timestamp for now
            var millis = eventDate - currentDate; // Find the number of seconds remaining
            if (seconds <= 0) { // After the event date has passed
                days = 0;
                hours = 0;
                minutes = 0;
                seconds = 0;
                millis = 0;

            } else {
                // Divide to find the number of days remaining
                days =          Math.floor(millis / (1000 * 60 * 60 * 24));       
                // Subtract the number of (complete, => 24 hours) days calculated above
                millis -=       days * 1000 * 60 * 60 * 24;                        

                // Get the number of hours from that modified number
                hours =         Math.floor(millis / (1000 * 60 * 60));            
                millis -=       hours * 1000 * 60 * 60;

                minutes =       Math.floor(millis / 1000 * 60);
                millis -=       minutes * 1000 * 60;

                seconds =       Math.floor(millis / 1000);
                millis -=       minutes * 1000;
            }
            this_sel.find('#days').val(days).trigger('change');
            this_sel.find('#hours').val(hours).trigger('change');
            this_sel.find('#mins').val(minutes).trigger('change');
            this_sel.find('#secs').val(seconds).trigger('change');
            this_sel.find('#mile').val(millis).trigger('change');

        } // End of count_exec();

        count_exec();

        interval = setInterval(count_exec, 50);

    } // End of the main function
}) (jQuery);

Answer 2

_source

Returns milliseconds according to local time
var millisecond = new Date().getMilliseconds();

hours        = new Date().getHours()
minutes      = new Date().getMinutes()
seconds      = new Date().getSeconds()
milliseconds = new Date().getMilliseconds()

document.write( hours + ':' + minutes + ':' + seconds + ':' + milliseconds )

^{output from the above example
4:59:55:618}

^{example in jsfiddle
http://jsfiddle.net/hq8nx7yb/}

Just adjust to your parameters