Geek Answers Handbook

Elapsed time from a given time in the database

I have an HTML table in which records from a database are written. I am using PHP / MySQL.

The column in my table named "Timer" is not retrieved from the database. I need the elapsed time (from a specific time in the database) to be shown here. For example, suppose the time is now February 21, 2013 6:20 pm, and the time in the database is February 21, 2013 5:50 pm, I need a timer column to display 00:30:00 (since 30 minutes have passed since 5.50 in the evening). It should be a Start timer (not a static one, which can be calculated using the difference in the MySQL time date), so anyone who accesses the page should be able to see the same elapsed time. I also need to stop the timer when I press another button.

I saw other posts related to this issue like Elapsed Time to database from Javascript timer , but I think that what I am asking is different. I am still confused about how to do this. I have very little Javascript knowledge, it would be great if you could help me with this or transfer me to the right place. Thanks!

0
source share
3 answers

This can be achieved with very little Javascript.

enter image description here

Assuming that the “Created” time is dynamically displayed in a table with the 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 above code 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 can change the update interval to what suits you, for example. to update every 5 minutes:

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

The general concept is to analyze the displayed "created" date in a timestamp (in milliseconds), and then calculate its difference with the current system time. To dynamically update the elapsed time, you use the Javascript setInterval function. To stop the elapsed time update, use the Javascript clearTimeout function.

I removed the prettyPrintTime function with powtac .

+2
source

If you are looking for a clean basic html solution with sql for dynamic changes, this is not possible. If you need to run a timer, you will need to use JS. (can be done using css5).

0
source

You want to use PHP to retrieve the time from the database, and then use Javascript to display the timer, which is calculated from the moment it is received. You should be able to find ready-made Javascript scripts that can do this quite easily. Here I found. I do not know if this was best for your needs, but this was one of the first results. Just cut off parts that you don’t need, such as year, month, etc.

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

0
source

More articles:


All Articles