Add thousandths in the jquery counter

1

I'm having a Javascript code that does a Days / Hours / Minutes / Seconds counter. But I need it also count the thousandths, but I have little knowledge in javascript and I do not know how to increase this option. The code that counts up 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 was the one I created to put the thousandths, but I did not continue because I did not understand the logic of the original code.     

asked by anonymous 20.08.2014 / 08:51

2 answers

1

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

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

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

Here's the code I've 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);
    
20.08.2014 / 16:11
0

source

Returns the 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 above example 4: 59: 55: 618

example in jsfiddle link

Just you adjust to your parameters

    
20.08.2014 / 10:01