Php/JS 倒数计时器然后运行东西答案

【问题标题】：Php/JS countdown timer then run stuffPhp/JS 倒数计时器然后运行东西
【发布时间】：2017-09-28 04:25:29
【问题描述】：

抱歉标题不好。

如果某件事用数字报告回来，我基本上想开始倒计时（5 分钟）。大多数后端都在 PHP 中，但我想为倒计时制作动画，以便用户可以看到（甚至最终可能会有进度条）。但是一旦倒计时他的零，如果条件不满足我想要它，让我们说为了简单起见刷新页面。

我正在寻找一些正确的指导。我应该：

在 JS 和 PHP 中分别运行计时器

或

做这样的事情Countdown timer built on PHP and jQuery?包含一个通用的php文件或类似的东西

谢谢大家。

【问题讨论】：

标签： javascript php jquery timer

【解决方案1】：

如果你想要一个计时器触发，当它结束时向后端报告，你可以用 JQuery 做一个 ajax 请求。我将尝试根据您在示例计时器中向我们展示的 PHP 必须初始化计数器的条件来解释它。

将 JQuery 添加到您的项目中 Download it here

下载 JQuery 倒计时here，也可以阅读更多关于库的信息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>

【讨论】：

感谢这个模板！一旦我的网站的前端完成，我会考虑实现这一点！