0

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 need the elapsed time (from the a specific time in the database) to be shown here. For Example, let's say the time now is 21 Feb 2013 6.20 pm and the time in the database is 21 Feb 2013 5.50 pm, I need the Timer Column to Display 00:30:00 (as thirty minutes have passed since 5.50PM). It must be a Running timer (Not a static one which can be computed by using MySQL datetime difference) so whoever accesses the page should be able to see the same elapsed time. I also need to stop the timer when I click another button.

I saw other posts here related to this question like this Elapsed Time to database from Javascript timer but I think what I'm asking is different. I'm still confused on how to go about doing this. I've very little Javascript knowledge, would be greatful if you could help me with it or refer me to the right place. Thank you!

Community
  • 1
  • 1
Belgarion
  • 149
  • 2
  • 3
  • 12

3 Answers3

3

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.

Community
  • 1
  • 1
pestrella
  • 9,786
  • 4
  • 39
  • 44
  • This solution is great, Thank you pestrella! I need a list of these timers and I have to stop them once the user clicks on a button for each of the timers. So I was wondering how do you retrieve the time of the stopped timer so that I can INSERT it into the database. I have to pass the individual javascript variables to PHP right? Is there any other way I can accomplish this? – Belgarion Feb 21 '13 at 23:03
  • I'm using a form and a hidden field to pass the Javascript variable to PHP. Each database entry has an individual form element. I need to store these timers for every single record in the database. Inside each form element, I have this hidden input field. So I suppose that I have to use Javascript to fill in the stoppedtime value. function setValue() { //document.documentID.stoppedtime.value = ____________________; } Kindly tell me what I should put in the blank, Thank you! – Belgarion Feb 21 '13 at 23:41
  • 1
    No problem, glad to help. With regard to POSTing the stopped times back to the database, I think you have the right idea using the hidden input. In order to update the hidden input fields with the elapsed times I suggest you add some code in the `update` function and pass the `elapsedTime` value into the hidden input. – pestrella Feb 21 '13 at 23:57
  • Thanks, I tried it but ran into some problems. I asked another question regarding this in another post, do see it if you are free.. =) I am just realizing how important it is for me to learn Javascript now! http://stackoverflow.com/questions/15019985/insert-values-into-multiple-hidden-fields-each-in-a-different-form-using-javascr – Belgarion Feb 22 '13 at 08:43
  • It appears your lastest question was answered. Good luck with the rest! – pestrella Feb 22 '13 at 12:18
0

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

udnisap
  • 899
  • 1
  • 10
  • 19
0

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/

Skryn
  • 155
  • 3
  • 12