0

データベースから取得したレコードを含むHTMLテーブルがあります。PHP/MySQLを使用しています。

「タイマー」という名前のテーブルの列がデータベースから取得されません。ここに表示される経過時間（データベース内の特定の時間から）が必要です。たとえば、現在の時刻が2013年2月21日午後6時20分で、データベースの時刻が2013年2月21日午後5時50分であるとすると、00：30：00を表示するタイマー列が必要です（午後5時50分から30分が経過したため）。ページにアクセスする人は誰でも同じ経過時間を見ることができるように、実行中のタイマー（MySQLの日時の差を使用して計算できる静的なタイマーではありません）である必要があります。また、別のボタンをクリックしたときにタイマーを停止する必要があります。

この質問に関連する他の投稿、たとえばJavascriptタイマーからデータベースへの経過時間などを見ましたが、私が求めているのは違うと思います。私はまだこれを行う方法について混乱しています。私はJavascriptの知識がほとんどないので、助けてくれたり、適切な場所を紹介してくれたら素晴らしいと思います。ありがとうございました！

4

3 に答える 3

3

これは、ごくわずかな Javascript で実現できます。

ここに画像の説明を入力

"Created" 時間が format を使用してテーブルに動的にレンダリングされると仮定すると、次の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関数を使用します。

powtacprettyPrintTimeから関数を持ち上げました。

于 2013-02-21T12:50:47.253 に答える
0

動的な変更を行うためにSQLを使用した純粋なhtmlベースのソリューションを探している場合、それは不可能です. 実行中のタイマーを実行する必要がある場合は、JS を使用する必要があります。（css5の助けを借りて行うこともできます）。

于 2013-02-21T11:38:12.957 に答える
0

PHP を使用してデータベースから時刻を取得し、Javascript を使用して、取得した時刻からカウントするタイマーを表示します。これを非常に簡単に実行できる既製の Javascript スクリプトを見つけることができるはずです。これが私が見つけたものです。それがあなたのニーズに最適かどうかはわかりませんが、最初の結果の 1 つでした。年、月などの不要な部分を切り取ってください。

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

于 2013-02-21T11:42:05.880 に答える