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

Question

所以我已经阅读并做了一些倒数计时器的示例，但我仍然不清楚如何创建倒数计时器。我想做一个倒数计时器，倒数 7 天，当倒数结束时将与本周置顶帖子的 div 相呼应。 div 将保留在那里，计时器将在 7 天后再次重新启动，7 天后将回显新的每周置顶帖子。一次又一次。之前我使用js通过一个简单的计时器来做到这一点，但是当刷新浏览器时计时器将重新启动。我知道有本地存储，但是当用户删除 cookie 时，计时器将再次重新启动。我希望每个用户都一样。我应该怎么办？有谁能给我一个明确的想法或步骤来开发这个吗？

目前我正在考虑一种方法来做到这一点是使用sql来比较到达结束时间echo div和内容的开始时间和结束时间以及+7天到结束时间并存储当前时间到开始时间并重复它并重复它<

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

这是我的 countdown.php << 我无法使用 $today 与从数据库中选择的 $end 进行比较，所以我为它创建了一个新的 $ending 进行比较

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

这是一个你可以采取的不错的策略。

• 确定您希望倒计时在一周中的哪一天结束。
• 让前端完成所有计数。
• 从前端确定倒计时何时结束。
• 发出 ajax 请求来检索置顶帖子的内容。
• 让后端发回当时应该显示的任何置顶帖子。 (使用后端的日期来执行此操作，不能相信前端!)

由于您希望每个用户同时发生此事件，因此不需要持久的前端存储(即 localStorage)，因此您可以从用户访问页面时开始倒计时。鉴于您已经在使用 jQuery，并牢记制作准确的前端计时器的许多注意事项，我强烈建议您使用像“countdown”这样的 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 方法截取输出。