Php/JS countdown timer then run stuff

Question

Sorry for poor title.

I basically want to start a countdown (5 minutes) if a certain thing reports back witha number. Most of the backend is in PHP but I want to animate to the countdown so the user can see (maybe even with a progress bar eventually). But once the countdown his zero, if the condition is not met I want it to, lets say refresh the page for simplicity.

I'm looking for some guidance in right guidance. Should I:

Run timers seperately in JS and PHP

or

Do something like this Countdown timer built on PHP and jQuery? with a common php file included or something along those lines

Thanks guys.

Pabhoz · Accepted Answer · 2017-09-28 05:07:14Z

well if you want a timer triggered by something that reports to the backend when it its over you could just do an ajax request with JQuery. I will try to explain it based on the condition that PHP has to init the counter as you show to us at the example timer.

Add JQuery to your project Download it here

Download JQuery countdown here, also you can read more about the library here

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
            <script src="./jquery.countdown-2.2.0/jquery.countdown.min.js"></script>
        </head>
        <body>
            <div class="countdown">
            <span id="clock"></span>
            </div>
            <script>
                function initTimer()
                {   
                    <?php  
                        date_default_timezone_set('America/Bogota'); //Your target timezone
                        $time = new DateTime(); 
                        $minutes_to_add = 5;
                        $time->add(new DateInterval('PT' . $minutes_to_add . 'M'));                
                    ?>
                    $('#clock').countdown('<?php echo $time->format('Y-m-d H:i:s'); ?>')//so we init the timer at te server time + 5 minutes
                    .on('update.countdown', function(event) {
                    var format = '%H:%M:%S';
                    $(this).html(event.strftime(format));
                    })
                    .on('finish.countdown', function(event) {
                    $(this).html('This offer has expired!')
                        .parent().addClass('disabled');
                            //at the end of the timer we will send data to the server
                            $.ajax({
                            url: "your_server_service_url",
                            method: "GET",
                            data: {"some":"data you want to sent to server"}
                        }).done(function(r){ // r is the response from your server (all text printed)
                            location.reload(); //After the server get the data we reload the current page.
                        });
                    });
                }

                initTimer();
            </script>
        </body>
        </html>

Thanks for this template! I'll look to implement this once my site's front end is complete!

Collectives™ on Stack Overflow

Php/JS countdown timer then run stuff

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related