Question

抱歉标题差。

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

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

在JS和PHP中单独运行计时器

或

使用包含常见的php文件或类似的内容执行此类Countdown timer built on PHP and jQuery?之类的操作

谢谢你们。

Answer 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>

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

1 个答案: