jQuery倒计时更新

时间:2016-07-21 07:50:38

标签: php jquery mysql

我们在竞价网站上使用以下倒计时功能。

setInterval(function(){
        $(".countdown").each(function(){
            var seconds = $(this).data('seconds');
            if(seconds > 0) {
                second = seconds - 1;
                $(this).data('seconds', second)
                 var date = new Date(null);
                 date.setSeconds(second); 
                 $(this).html(date.toISOString().substr(11, 8))
            }
          else
            {
              $(this).html("Finished");
    alert('finished');
            }
        });
    }, 1000);

我们传递了我们希望计数器出现的秒数(有时在我们的页面上不止一次:

echo "<div id=\"".$auctionid."\" class=\"countdown\" data-seconds=\"".$diff."\"></div>";

到目前为止,应该清楚它是否有效。现在我们遇到这样一种情况:当有人在网站的某个地方出价时 - 剩下的拍卖时间会延长15秒,写入mysql。

$ diff变量是从mysql结束时间计算出来的,并在页面加载时传递给jQuery。

问题是如何检查该拍卖的mysql时间并在jQuery计数器中同步?我们有想法可能每5秒检查一次并在达到零之后确保它已经结束了?有什么建议吗?

对用户来说应该很好看。

编辑:

这是我们到目前为止所做的:

$(".countdown").each(function() {

        var countdown = $(this);
        var auctionid = $(this).attr('id');

            var interval = setInterval(function() {

                        var seconds = countdown.data("seconds");

                        if( seconds > 0 ) {

                            var second = --seconds;
                            var date = new Date(null);
                            date.setSeconds(second);
                            countdown.data("seconds", second).html(date.toISOString().substr(11, 8))

                        } else {

                        //      countdown.html("Finished <img src=\"loading.gif\" class=\"tempload\">");

                            startUpdateingTimeFromDatabase(auctionid);

                            countdown.html("Finished");
                            clearInterval(interval);

                        }

            }, 1000);

});





function startUpdateingTimeFromDatabase(auctionid) {


            $.getJSON("timer.php?auctionid="+auctionid, function(response) { 
                // console.log(response.seconds); 

                    $(".countdown#"+auctionid).data("seconds", response.seconds);

                    if( response.seconds > 0 ) {
                        //  setTimeout(startUpdateingTimeFromDatabase(auctionid), 1000);
                    } else {

                    }

             });


}

这根本不是我们需要它做的事情。我们需要在每次达到零时更新秒(查询startUpdateingTimeFromDatabase)。现在我认为有两种方法。首先是通过startUpdateingTimeFromDatabase函数返回秒,然后在main函数中执行所有操作,第二步是通过startUpdateingTimeFromDatabase更新div。我认为首先会更好但我找不到合适的方法。

感谢任何帮助。感谢。

1 个答案:

答案 0 :(得分:1)

您存储元素In [62]: x Out[62]: array([[[[ 4., 3., nan, nan], [ 0., 2., 2., nan], [ 4., 5., nan, 3.], [ 2., 0., 3., 1.]], [[ 2., 0., 0., 1.], [ nan, 3., 0., nan], [ 0., 1., nan, 2.], [ 5., 4., 0., 1.]], [[ 4., 0., 2., 0.], [ 4., 0., 4., 5.], [ 3., 4., 1., 0.], [ 5., 3., 4., 3.]]], [[[ 2., nan, 6., 4.], [ 3., 1., 2., nan], [ 5., 4., 1., 0.], [ 2., 6., 0., nan]], [[ 4., 1., 4., 2.], [ nan, 1., 5., 5.], [ 2., 0., 1., 1.], [ 6., 3., 6., 5.]], [[ 1., 0., 0., 1.], [ 1., nan, 2., nan], [ 3., 4., 0., 5.], [ 1., 6., 2., 3.]]]]) In [63]: m = 0 In [64]: np.nanmax(x, axis=tuple(i for i in range(x.ndim) if i != m)) Out[64]: array([ 5., 6.]) 中剩余的秒数。那么为什么不通过data获取剩余时间并将新秒数传递给元素呢?在下一个间隔运行中,所有时间都将更新。

这样的事情:

ajax

如何检查并获得剩余时间取决于您。您可以再次为所有地方设置时间。

$.get("yourGetRemainingTimeScript.php", {auctionId: 1}, function(response) {
    $(".countdown").data("seconds", response.seconds);
});

我身边的另一个暗示:不要在$(".countdown").data("seconds", 1337); 中使用each循环所有元素。在循环内创建一次间隔。然后你的脚本不需要一遍又一遍地搜索元素。

并清除完成后的间隔。

setInterval

Full working example.