从数据库中给定时间开始经过的时间答案

【问题标题】：Elapsed time from a given time in the database从数据库中给定时间开始经过的时间
【发布时间】：2013-02-06 17:04:43
【问题描述】：

我有一个 HTML 表，其中包含从数据库中提取的记录。我正在使用 PHP/MySQL。

我的表中名为“Timer”的列未从数据库中检索到。我需要在此处显示经过的时间（从数据库中的特定时间开始）。例如，假设现在的时间是 2013 年 2 月 21 日下午 6 点，数据库中的时间是 2013 年 2 月 21 日下午 5 点，我需要计时器列显示 00:30:00（因为从下午 5 点开始已经过去了 30 分钟）。它必须是一个 Running 计时器（不是可以使用 MySQL 日期时间差计算的静态计时器），因此访问该页面的任何人都应该能够看到相同的经过时间。当我点击另一个按钮时，我还需要停止计时器。

我在这里看到了与此问题相关的其他帖子，例如Elapsed Time to database from Javascript timer，但我认为我要问的是不同的。我仍然对如何去做这件事感到困惑。我对 Javascript 的了解很少，如果您能帮助我或将我推荐到正确的地方，我将非常感激。谢谢！

【问题讨论】：

您必须使用一些 javaript 或 jquery 或其他第三方小部件来满足您的需求...

标签： php javascript jquery mysql

【解决方案1】：

如果你正在寻找一个纯 html 基础的解决方案，用 sql 来做动态更改，那是不可能的。如果你需要做一个运行计时器，你将需要使用 JS。（也可以在 css5 的帮助下完成）。

【讨论】：

【解决方案2】：

您希望使用 PHP 从数据库中检索时间，然后使用 Javascript 显示一个从检索到的时间开始计数的计时器。您应该能够找到可以很容易地做到这一点的可用的预制 Javascript 脚本。这是我找到的一个。我不知道它是否最适合您的需求，但它是第一个结果之一。只需剪掉不需要的部分，例如年、月等。

http://praveenlobo.com/techblog/javascript-countup-timer/

【讨论】：

谢谢斯克林！认为另一个答案更好.. =)

【解决方案3】：

这可以用很少的 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 函数。

【讨论】：

这个解决方案很棒，谢谢你pestrella！我需要这些计时器的列表，一旦用户单击每个计时器的按钮，我就必须停止它们。所以我想知道你如何检索停止计时器的时间，以便我可以将它插入到数据库中。我必须将各个 javascript 变量传递给 PHP，对吗？有没有其他方法可以做到这一点？
我正在使用表单和隐藏字段将 Javascript 变量传递给 PHP。每个数据库条目都有一个单独的表单元素。我需要为数据库中的每条记录存储这些计时器。在每个表单元素中，我都有这个隐藏的输入字段。所以我想我必须使用Javascript来填写stoppedtime值。 function setValue() { //document.documentID.stoppedtime.value = ____________________; } 请告诉我应该在空白处填什么，谢谢！
没问题，很高兴为您提供帮助。关于将停止时间发布回数据库，我认为您使用隐藏输入的想法是正确的。为了使用经过的时间更新隐藏的输入字段，我建议您在 update 函数中添加一些代码并将 elapsedTime 值传递到隐藏的输入中。
谢谢，我试过了，但遇到了一些问题。我在另一篇文章中问了另一个关于这个的问题，如果你有空，请查看它.. =) 我只是意识到现在学习 Javascript 对我来说是多么重要！ stackoverflow.com/questions/15019985/…
您的最新问题似乎已得到解答。祝你好运！