How to do a countdown with jQuery?

Question

How to do a countdown with jQuery?

Navigation

#1 by (3 votes)

2

I'm doing a script for study in this link and would like to implement in this script a countdown timer as it does on collective purchase sites and would like the help of you to accomplish this task.

What I have already done is to register the time of beginning and end each of the products and would like to perform this countdown timer. I've also pulled the information from the bank to the view as seen.

Another thing I did was to convert to timestamp start and end

The format of the date in the database is in DATETIME .

Question : this is the right field format to perform the time subtraction thus showing the remaining time or I should convert that format before performing the subtraction operation ?

php mysql jquery

asked by anonymous 08.10.2015 / 03:04

1 answer

How to compile SQLite3? R package to convert numbers into text in number extension

score 3 · Accepted Answer

There are some plugins already ready that you can do without a lot of headache, here are two examples:

1 - FlipClock (already with css):

<html>
    <head>
        <link rel="stylesheet" href="flipclock.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="flipclock.js"></script>
    </head>
    <body>
        <div class="clock" style="margin:2em;"></div>

        <script type="text/javascript">
            $(document).ready(function() {
                var clock;

                clock = $('.clock').FlipClock({
                    clockFace: 'DailyCounter',
                    autoStart: false,
                    callbacks: {
                        stop: function() {
                            alert('Fim!')
                        }
                    }
                });

                clock.setTime(3600); // tempo em segundos
                clock.setCountdown(true);
                clock.start();
            });
        </script>
    </body>
</html>

2 - jQuery.countdown (more basic to work the way you want and with date format option) :

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="jquery.countdown.js"></script>
    </head>
    <body>
        <span id="clock"></span>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#clock').countdown('2015/10/09 12:34:56', function(event) {
                    $(this).html(event.strftime('%D dias %H:%M:%S'));
                });
            });
        </script>
    </body>
</html>

Only 2 of the various plugins available for your application, just choose the one that suits you best. Regarding the format, as shown each one works in a way, have to convert according to the plugin that will use.

Hope it helps, hug