Question

我想创建一个倒计时时钟，当你出现在页面上时，它会从预定义的数字开始倒计时，比如8小时。如果你离开页面，比如2小时后，我希望它停止倒计时。如果你回到页面，我希望它继续倒计时，现在只剩下6个小时了。

这可能是使用javascript客户端和php服务器端吗？

如果我想创建多个用户生成的倒计时，我可以使用mySQL存储不同的变量吗？

显然我在这里有很多工作要做，我不希望有人给我写完整个代码。我正在寻找一个起点，也许是一些教程或建议，以何种方式开始阅读。我非常喜欢js，php，mysql，但可以使用它们。

Answer 1

这是一个使用a countdown plugin for jQuery的解决方案。下载jQuery Countdown plugin，将jquery.countdown.css和jquery.countdown.min.js放在与文件相同的文件夹中（或其他位置，并调整下面代码中的路径）。在您的文档的头部分包括：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.min.js"></script>
<style type="text/css">@import "jquery.countdown.css";</style>

在PHP代码的某处，在输出任何内容之前，运行此命令以设置时间：

if (!isset($_COOKIES['endtime'])) {
    $endtime = time() + 28800000;
    setcookie('endtime', $endtime);
} else {
    $endtime = $_COOKIE['endtime'];
}

然后，在您希望显示时间戳的位置，输出此HTML：

<span class="countdown hasCountdown" id="myCountdown"></span>

在它之后的某个地方，输出这个JavaScript：

var targetDate = new Date(<?php echo ($endtime ); ?>); 
$('#myCountdown').countdown({until: targetDate});

编辑：好的，我的上一个答案有一些改进，包括当用户离开页面时暂停。我也将帖子转到社区维基上，欢迎任何人编辑和改进它。

为了跟踪用户在页面上的最后位置，您需要保留一个cookie，您每隔5秒左右用当前时间更新一次。这里有一些JavaScript可以做到这一点：

function setCookie(c_name, value, exdays)
{
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function updateCookie()
{
    var curTime = new Date();
    setCookie('lastvisit', curTime.getTime(), 30);
    setTimeout("updateCookie()", 5000);
}

您需要运行updateCookie()一次，然后它将每五秒运行一次。要在页面加载完成后第一次运行，请在body标签上添加一个onLoad，如下所示：

<body onLoad="updateCookie()">

您的PHP代码将如下所示，而不是上面的代码：

if (!isset($_COOKIES['lastvisit']) || !isset($_COOKIES['endtime'])) {
    $endtime = (time()*1000) + 28800000;
    setcookie('endtime', $endtime, time() + 2592000);
} else {
    $prevendtime = $_COOKIE['endtime'];
    $lastvisit = $_COOKIE['lastvisit'];
    $timeleft = $prevendtime - $lastvisit;
    $endtime = (time()*1000) + $timeleft
}

所有Cookie都会在30天后过期，因此如果您的用户离开超过30天，他们将会重置。

Answer 2

使用uniqid()通过cookie为用户提供唯一ID，然后在服务器端（在数据库或文件中）保存唯一ID和倒计时时间，然后，一旦用户进入并且他的浏览器稀释了cookie，找出了唯一的ID，并给他倒计时所需的时间。

至于倒计时本身，我上面的回答者有很多插件，例如this excellent plugin given。通过PHP将日期传递给JavaScript的Date对象，然后使用插件。

倒计时钟

2 个答案: