发表新帖
发表新帖

Elapsed time from a given time in the database

后端 未结
关注
3 1473
悲哀的现实
悲哀的现实 2021-01-28 14:20

I have a HTML table which has records pulled in from the database. I\'m using PHP/MySQL.

The Column in my table named \"Timer\" is not retrieved from the database. I nee

相关标签:
3条回答
  • 被撕碎了的回忆
    2021-01-28 14:30

    This can be achieved with very little Javascript.

    enter image description here

    Assuming that the "Created" time is rendered dynamically in the table with format dd MMM yyyy hh:mm:ss, something like this should do the trick:

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

    Copy the code above into a file, say index.html, and open it in a browser. I tested it on Chrome.

    It should update the elapsed time every 2 seconds, but you may change the update interval to something that suits you, e.g. to make it update every 5 minutes:

    new ElapsedTimeLogger("#date", "#elapsed", 300);

    The general concept is to parse the rendered "Created" date into an epoch timestamp (in milliseconds) and then compute its difference with the current system time. To get the elapsed time updating dynamically you use Javascript's setInterval function. To stop updating the elapsed time use Javascript's clearTimeout function.

    I lifted the prettyPrintTime function from powtac.

    0 讨论(0)
  • 自闭症患者
    2021-01-28 14:30

    You'd want to use PHP to retrieve the time from the database, then use Javascript to display a timer that's counting from the time retrieved. You should be able to find available premade Javascript scripts that can do this quite easily. Here's one I found. I have no idea if it's the best for your needs, but it was amongst the first results. Just snip off the parts not needed, like the year, month, etc.

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

    0 讨论(0)
  • 孤独总比滥情好
    2021-01-28 14:40

    If you are looking for a pure html base solution with the sql to do the dynamic changes, it is impossible. If you need to do a running timer you will need to use JS. (can be done with the help of css5 as well).

    0 讨论(0)
 看不清?
提交回复
热议问题