How to count down with jQuery?

Asked

Viewed 7,488 times

2

I’m writing a script for study purposes at that link and would like to implement in this script a clock with countdown as is done on collective purchase websites and would like the help of you to accomplish this task.

What I have done is register in the database the time of beginning and of end in each of the products and would like to realize this countdown. I have also pulled the bank information to the view as can be seen.

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

The date format 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 must convert this format before performing the subtraction operation?

inserir a descrição da imagem aqui

php jquery mysql

1 answer

4


Have some plugins already ready that it is possible to do this without much headache, follow 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>
        <script src="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>
        <script src="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>

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

I hope it helps, hug

Browser other questions tagged php jquery mysql

You are not signed in. Login or sign up in order to post.