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

所以我读过并做过一些倒计时的例子，但我仍然不清楚如何创建倒计时。我想做一个倒计时计时器，这是倒计时7天，当倒计时结束时，将在本周的顶部职位回应一个div。div将停留在那里，计时器将在7天后重新启动，7天后将回应新的每周热门帖子。一次又一次。在使用js之前，我用一个简单的计时器来完成这项工作，但是当刷新broswer时，计时器将重新启动。我知道有本地存储，但当用户删除cookie时，计时器将重新启动。我希望它对每个用户都是一样的。我该怎么办？有人能给我一个明确的想法或步骤来开发这个吗

目前，我正在考虑这样做的一种方法是使用sql将到达endtime echo div和content时的starttime和endtime进行比较，并将+7天与结束时间进行比较，将当前时间存储到开始时间，然后重复并重复< 我用mysql编写了一个简单的php脚本，并使用jq使时间每秒都在运行

---

这是my countdown.php您可以根据需要从后端获取一次日期戳，然后执行以下操作：

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

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);

---

您可以根据需要从后端获取一次日期戳，并执行以下操作：

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

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);

---

这里有一个不错的策略，你可以做

• 确定你希望倒数计时在一周的哪一天结束
• 让前端做所有的计数
• 当倒计时结束时，从前端确定
• 发出ajax请求以检索最上面的帖子
• 让后端发回在该时间点出现的任何热门帖子。（使用后端的日期执行此操作，不能信任前端！）

由于您希望每个用户都能同时发生此事件，因此不需要持久的前端存储（即localStorage），只要用户访问页面时开始倒计时即可。基于您已经在使用jQuery这一事实，并牢记制作准确前端计时器的许多注意事项，我强烈建议您使用类似“”的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

  方法截取输出

---

这里有一个不错的策略，你可以做
• 确定你希望倒数计时在一周的哪一天结束
• 让前端做所有的计数
• 当倒计时结束时，从前端确定
• 发出ajax请求以检索最上面的帖子
• 让后端发回在该时间点出现的任何热门帖子。（使用后端的日期执行此操作，不能信任前端！）
由于您希望每个用户都能同时发生此事件，因此不需要持久的前端存储（即localStorage），只要用户访问页面时开始倒计时即可。基于您已经在使用jQuery这一事实，并牢记制作准确前端计时器的许多注意事项，我强烈建议您使用类似“”的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

  方法截取输出

---

每秒调用ajax不是个好主意……什么是

div#倒计时

内容？秒？分钟？天？那就是内容是空的，我使用ajax将其附加到div倒计时中，一旦到达结束时间，将从db中回显内容，但在本例中，我是回显“abc”制作示例每隔一秒进行ajax调用不是很好……什么是

div#倒计时

content？秒？分钟？天？也就是说内容是空的，我使用ajax将其附加到div倒计时中，一旦到达结束时间，将从db中回显内容，但在本例中，我是回显“abc”制作示例我使用的插件节省了很多时间time@Chew令人惊叹的！请将这个答案标记为正确（点击左边的复选标记），如果它能满足你的需要。我使用的插件节省了很多时间time@Chew令人惊叹的！如果这个答案能满足您的需要，请将其标记为正确（单击左侧的复选标记）。

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);