倒计时钟 [英] Countdown Clock
问题描述
我想创建一个倒计时时钟，当你出现在页面上时，它会从预定义的数字开始倒计时，比如8小时。如果你离开页面，比如2小时后，我希望它停止倒计时。如果你回到页面，我希望它继续倒计时，现在只剩下6个小时。
I would like to create a countdown clock that when you show up on the page it starts to countdown from a pre-defined number, say 8 hours. If you leave the page, say after 2 hours, I would like it to stop counting down. If you return to the page I want it to resume counting down, now with only 6 hours left.
这是否可以使用javascript客户端和php服务器端？
Is this possible using javascript client side, and php server side?
如果我想创建多个用户生成的倒计时，我可以使用mySQL存储不同的变量吗？
If I wanted to create multiple user generated countdowns can I use mySQL to store the different variables?
显然我在这里有很多工作，我不希望有人给我写完整个代码。我正在寻找一个起点，也许是一些教程或建议，以何种方式开始阅读。我是js，php，mysql的新手，但可以使用它们。
Obviously I have a lot to work out here, I don't want someone to write me the whole code. I am looking for a starting point, maybe some tutorials or advice on which way to start perusing. I am very much a novice at js, php, mysql but can work with them.
推荐答案
这是一个使用 jquery.countdown.css 和 jquery.countdown.min.js 在与文件相同的文件夹中（或其他地方，并调整下面代码中的路径）。在您的文档的head部分包括：
Here's a solution that uses a countdown plugin for jQuery. Download the jQuery Countdown plugin, and place jquery.countdown.css and jquery.countdown.min.js in the same folder as your file (or elsewhere, and adjust the paths in the code below). In the head section of your document include this:
<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代码的某个地方，在输出任何内容之前，运行它来设置时间将是：
Somewhere in the PHP code, before anything is outputted, run this to set when the time will be:
if (!isset($_COOKIES['endtime'])) {
$endtime = time() + 28800000;
setcookie('endtime', $endtime);
} else {
$endtime = $_COOKIE['endtime'];
}
然后，在您想要显示时间戳的位置，输出此HTML：
Then, where you want the timestamp to appear, output this HTML:
<span class="countdown hasCountdown" id="myCountdown"></span>
在它之后的某个地方，输出这个JavaScript：
And somewhere after it, output this JavaScript:
var targetDate = new Date(<?php echo ($endtime ); ?>);
$('#myCountdown').countdown({until: targetDate});
编辑：好的，以下是我之前的答案的一些改进，包括当用户离开页面时暂停。我也将帖子转到社区维基，欢迎任何人编辑和改进它。
EDIT: Alright, here are some improvement on my previous answer to include pausing when the user leaves the page. I'm also switching the post over to community wiki so anyone is welcome to edit and improve it.
为了追踪用户在页面的最后时刻，你需要保留一个cookie，你每隔5秒左右用当前时间更新一次。这里有一些JavaScript可以做到这一点：
In order to track when the user was last on the page, you need to keep a cookie that you update every 5 seconds or so with the current time. Here's a bit of JavaScript that does just that:
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，如下所示：
You need to run updateCookie() once and then it will keep running every five seconds. To have it run for the first time as soon as the page has finished on loading, add an onLoad to your body tag, like this:
<body onLoad="updateCookie()">
您的PHP代码将如下所示而不是上面的代码：
Your PHP code will then look like this instead of the one above:
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天，他们将重置。
All the cookies are set to expire after 30 days, so if your user stays away for more than 30 days they will reset.
这篇关于倒计时钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
