我有一个 HTML 表格，其中包含从数据库中提取的记录。我正在使用 PHP/MySQL。
我的表中名为“Timer”的列未从数据库中检索到。我需要在此处显示耗时(从数据库中的特定时间开始)。例如，假设现在时间是 2013 年 2 月 21 日下午 6 点 20 分，数据库中的时间是 2013 年 2 月 21 日下午 5 点 50 分，我需要计时器列显示 00:30:00(因为从 5 点 50 分开始已经过了 30 分钟)。它必须是一个Running 计时器(不是一个可以使用 MySQL 日期时间差异计算的静态计时器)，因此访问该页面的任何人都应该能够看到相同的耗时。我还需要在单击另一个按钮时停止计时器。
我在这里看到其他与此问题相关的帖子，例如 Elapsed Time to database from Javascript timer但我认为我要问的是不同的。我仍然对如何去做这件事感到困惑。我的 Javascript 知识很少，如果你能帮助我或将我推荐到正确的地方，我将不胜感激。谢谢!
最佳答案
这可以用很少的 Javascript 来实现。
假设“创建”时间在表中动态呈现，格式为 dd MMM yyyy hh:mm:ss，这样的事情应该可以解决问题:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
ElapsedTimeLogger = function(dateElementId, elapsedElementId, interval) {
var container = $(elapsedElementId);
var time = parseDate($(dateElementId).text());
var interval = interval;
var timer;
function parseDate(dateString) {
var date = new Date(dateString);
return date.getTime();
}
function update() {
var systemTime = new Date().getTime();
elapsedTime = systemTime - time;
container.html(prettyPrintTime(Math.floor(elapsedTime / 1000)));
}
function prettyPrintTime(numSeconds) {
var hours = Math.floor(numSeconds / 3600);
var minutes = Math.floor((numSeconds - (hours * 3600)) / 60);
var seconds = numSeconds - (hours * 3600) - (minutes * 60);
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
var time = hours + ":" + minutes + ":" + seconds;
return time;
}
this.start = function() {
timer = setInterval(function() {update()}, interval * 1000);
}
this.stop = function() {
clearTimeout(timer);
}
}
$(document).ready(function () {
var timeLogger = new ElapsedTimeLogger("#date", "#elapsed", 2);
timeLogger.start();
$("#stop_timer").click(function() {
timeLogger.stop();
});
$("#start_timer").click(function() {
timeLogger.start();
});
});
</script>
</head>
<body>
<table border="1">
<tr><th>Created</th><th>Timer</th></tr>
<tr><td id="date">21 Feb 2013 12:30:00</td><td id="elapsed"></td></tr>
</table>
<input id="stop_timer" type="button" value="Stop timer"></input>
<input id="start_timer" type="button" value="Start timer"></input>
</body>
</html>将上面的代码复制到一个文件中，比如 index.html，然后在浏览器中打开它。我在 Chrome 上对其进行了测试。
它应该每 2 秒更新一次耗时，但您可以将更新间隔更改为适合您的值，例如使其每 5 分钟更新一次:
new ElapsedTimeLogger("#date", "#elapsed", 300);一般概念是将呈现的“创建”日期解析为纪元时间戳(以毫秒为单位)，然后计算其与当前系统时间的差异。要动态更新耗时，您可以使用 Javascript 的 setInterval 函数。要停止更新耗时，请使用 Javascript 的 clearTimeout 函数。
我从 powtac 中提取了 prettyPrintTime 函数.
关于php - 从数据库中给定时间开始的耗时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15001152/