Истекшее время из заданного времени в базе данных

У меня есть таблица HTML, в которой записаны записи из базы данных. Я использую PHP / MySQL.

Столбец в моей таблице с именем «Таймер» не извлекается из базы данных. Мне нужно истекшее время (с определенного времени в базе данных), которое будет показано здесь. Например, предположим, что время составляет 21 февраля 2013 года 6,20 вечера, а время в базе данных – 21 февраля 2013 года 5:50 вечера, мне нужна колонка таймера для отображения 00:30:00 (так как прошло 30 минут с 5.50 вечера). Это должен быть таймер Running (не статический, который может быть вычислен с использованием разницы в дате времени MySQL), поэтому любой, кто обращается к странице, должен иметь возможность увидеть то же самое прошедшее время. Мне также нужно остановить таймер, когда я нажимаю другую кнопку.

Я видел другие сообщения, связанные с этим вопросом, такие как Elapsed Time, с базой данных с таймера Javascript, но я думаю, что то, что я прошу, отличается. Я все еще смущен тем, как это сделать. У меня очень мало знаний 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);

Общая концепция состоит в том, чтобы проанализировать отображаемую «созданную» дату в метку времени (в миллисекундах), а затем вычислить ее разницу с текущим системным временем. Чтобы динамически обновлять истекшее время, вы используете функцию setInterval Javascript. Чтобы остановить обновление прошедшего времени, используйте функцию clearTimeout Javascript.

Я снял функцию prettyPrintTime из powtac .

Если вы ищете чистое базовое решение html с sql для динамических изменений, это невозможно. Если вам нужно выполнить запуск таймера, вам нужно будет использовать JS. (может быть сделано с помощью css5).

Вы хотите использовать PHP для извлечения времени из базы данных, а затем использовать Javascript для отображения таймера, который отсчитывается от полученного времени. Вы должны иметь возможность находить готовые сценарии Javascript, которые могут сделать это довольно легко. Вот один, который я нашел. Я понятия не имею, насколько это лучше для ваших нужд, но это было одним из первых результатов. Просто отрежьте части, которые вам не нужны, например год, месяц и т. Д.

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