Question

所以我已经阅读并做了一些倒数计时器的例子，但我仍然没有清楚知道如何创建倒数计时器。我想做一个倒数计时器，这是倒计时7天倒计时结束将在本周回应顶部帖子的div。 div将保持在那里，计时器将在7天后重新启动，7天后将响应新的每周顶级帖子。一次又一次。在我使用js使用简单的计时器执行此操作之前，但在刷新broswer时，计时器将重新启动。我知道有本地存储但是当用户删除cookie时，计时器将再次重启。我希望每个用户都一样。我该怎么办？有没有人可以给我一个明确的想法或步骤来发展这个？

目前我认为这样做的方法是使用sql来比较到达终结时回声div和内容的开始时间和结束时间以及+ 7天到结束时间并将当前时间存储到开始时间并重复它并重复它＆lt;

我用mysql做了一个简单的php脚本，并使用jq让时间每秒都在运行

这是我的countdown.php＆lt;＆lt;我今天不能使用$与$ end比较，这是从db中选择所以我创建了一个新的$结束比较

<?php

include '../config.php';


date_default_timezone_set('Asia/Kuala_Lumpur');
$today = date("Y-m-d H:i:s");
$s="Select TIMESTAMP(start_date)as date_field from countdown_timer";
$e ="Select TIMESTAMP(end_date)as date_field from countdown_timer";
$start = mysqli_query($connection,$s)or die(mysqli_connect_errno($connection));
$end = mysqli_query($connection,$e)or die(mysqli_connect_errno($connection));
$ending = date("2016-06-01 23:05:40");

if ( $today == $end ){  
   echo "abc";
   $next_seven_date= date('Y-m-d H:i:s', strtotime($today. ' + 1 minute'));
   $end_add_time = mysqli_query($connection,"INSERT INTO countdown_timer (`end_date`) VALUES ('$next_seven_date') ");
}
 else {
     echo "$today";
}

这是我的jq让计时器每秒运行

$(document).ready(function(e){
$.ajaxSetup({cache:false});
setInterval(function(){$('#countdown').load('countdownTimer.php?');}, 1000); 
});

这是我的HTML

<div id="countdown"></div>

我很难有这个希望有办法发展这个

Answer 1

您可以根据自己的要求从后端获取日期戳，并执行以下操作：

只需解释您可以使用的逻辑，您就可以根据自己的要求修改代码。

var a = new Date("2016-06-01 23:05:40"); // date in this format will go here to create date object at frontend
var b;

function timer(){

    a.setSeconds(a.getSeconds()-1);

    b = a.toLocaleTimeString(); //converting to hours: min: sec: meridian

    document.getElementById("countdown").innerHTML = b;

}

setInterval(timer,1000);

Answer 2

这是一个不错的策略。

确定您希望倒数的星期几结束。
让前端完成所有计算。
倒计时结束时从前端确定。
发出一个ajax请求来检索顶部帖子。
让后端发送回任何顶级帖子，以便在该时间点显示。（使用后端的日期来做到这一点，不能信任前端！）

由于您希望每个用户同时发生此事件，因此您不需要持久的前端存储（即localStorage），您可以从用户访问页面时开始倒计时。捎带你已经在使用jQuery并记住制作一个准确的前端计时器的许多注意事项，我强烈建议你使用像＃34; countdown＆＃34;这样的jQuery插件。对于您的用例，它将是这样的......

function nextDay(x) { 
    // explanation of this function: http://stackoverflow.com/a/1579109/1666547
    var now = new Date();    
    now.setDate(now.getDate() + (x+(7-now.getDay())) % 7);
    return now;
}

function retrieveCurrentTopPost() {
    // MAKE AJAX CALL HERE TO RETRIEVE THE CURRENT TOP POST
}

retrieveCurrentTopPost()

var opts = {
    date: nextDay(0), // argument can be 0-6, 0 is next Sunday
    onEnd: function () {
        retrieveCurrentTopPost()
        this.restart(opts) // restart the counter
    }
}

$('#timer').countdown(opts);

最后的说明：

我只提供策略，而不是工作实施。
此代码完全未经测试，我对此插件的所有了解均基于其文档的快速浏览。
很抱歉没有提供后端示例，但它应该是直接的 - 只需服务于服务器上指定日期的最高职位。
您可能需要调整前端时区以匹配后端。
如果使用此插件，您可以完全使用css调整倒计时时钟的外观，或使用提供的render方法截取输出。

创建一个倒数计时器，这是最好的解决方案？

2 个答案: