6

mysqli を使用して$dbSessionDuration、クエリからのデータの結果をこの変数にバインドできる変数があります。変数は時間を保持するため、変数の$dbSessionDuration時間形式は次のようになります。

01:30:10

つまり、1 時間 30 分 10 秒です。私がやりたい$dbSessionDurationのは、タイマーに値を表示して、上記の例では 01:30:10 から刻み始め、停止すると 0 になるようにすることです。私の質問は、タイマーを作成$dbSessionDurationし、00:00:00 までカウントダウンするためにタイマーに任意の値を配置する方法です。

4

7 に答える 7

14

まず、時間を秒単位に変換する必要があります。

<?php

list($hour,$min,$sec) = explode(':', $dbSessionDuration);
$dbSessionDurationTime = mktime(0,0,0,$hour,$min,$sec);

?>

カウントダウンを作成するには、Javascript を使用する必要があります。

<script type="text/javascript">
    var millis = <?php echo $dbSessionDurationTime; ?>

    function displaytimer(){
        var hours = Math.floor(millis / 36e5),
            mins = Math.floor((millis % 36e5) / 6e4),
            secs = Math.floor((millis % 6e4) / 1000);
            //Here, the DOM that the timer will appear using jQuery
            $('.count').html(hours+':'+mins+':'+secs);  
    }

    setInterval(function(){
        millis -= 1000;
        displaytimer();
    }, 1000);

</script>

私はテストしませんでしたが、うまくいくはずです！

于 2013-01-16T03:22:15.433 に答える
4

作成するJavaScript タイマーは不正確になることを最初に知っておく必要があります。これは、ここに非常にうまくまとめられた無数の理由によるものです。

すばらしいことに、反復ごとにユーザーのシステム時間を簡単にチェックすることで、スクリプトの不正確さを制限できます。はい、ユーザーのシステム時刻。

あなたの状況では、経過時間 (01:30:10) に関心があるため、これは問題ではありませんが、特定の瞬間を待っている場合は、タイムゾーンの違いを処理する必要があります。ユーザーのコンピュータの時計を設定します。

また、理解する必要があるのは、これがセキュリティの問題である場合、スクリプトをロードした後のシステム クロックへの変更を考慮することができないということです。

例:一部のサイトでは、特定のアクションを実行する前に待機する必要があります。しかし、時計を早めると、ほとんどの場合、不十分なセキュリティを回避するのに役立ちます。ほとんどの場合、二次チェックはサーバー側で行われるため、そうではありません。私が言おうとしているのは、これらのサーバー側のチェックを行うことです。

あなたの質問に答えるために、通過するのに必要な秒数を個人的に計算します。

$time = explode(':',$dbSessionDuration);# get hour, minutes, seconds to be elapsed
$time = $time[2] + $time[1] * 60 + $time[0] * 3600;# get elapse time in seconds

JavaScript ファイルでは、次のようなことができます。

(function(endTime){
    endTime*=1000; // javascript works with milliseconds
    endTime+=new Date().getTime();// add the current system time into the equation
    // your timeSync function
    (function timerSync() {
        var diff = new Date(endTime - new Date().getTime());
        var timer=document.getElementById('timer');
        if(diff<=0)return timerEnd(timer);
        timer.innerHTML = 
            doubleDigits(diff.getUTCHours())
            + ':' +
            doubleDigits(diff.getUTCMinutes())
            + ':' +
            doubleDigits(diff.getUTCSeconds())
        ;
        setTimeout(timerSync,1000);
    })();// also call it to start the timer
    // your timer end function
    function timerEnd(timer) {
        timer.innerHTML='Timer has stopped now';
    }
    // double digit formatting
    function doubleDigits(number) {
        return number<10
            ? '0'+number
            : number
        ;
    } 
})(
    <?php echo $time;?>
);// time to elapse 1:30:10

これは実用的なフィドルですが、覚えておいてください。これは、特定のケースに最適化されていません。ページに2つのタイマーがある場合は、オブジェクトにラップすることもできますが、まったく同じように機能する関数でクロージャーメモリを2倍にしないでください。

ご不明な点がございましたら、コメントでお問い合わせください。お手伝いさせていただきます。

于 2013-01-21T00:51:15.680 に答える
3

jQuery を自分のものとして使用してください。

ここに素敵なプラグインがありますhttps://github.com/jylaurl/jquery-runner

これはその例です：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src="https://raw.github.com/jylauril/jquery-runner/master/build/jquery.runner-min.js"></script>      
    </head>
    <body>
        <span id="runner"></span>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#runner').runner({
                    autostart: true,
                    countdown: true,
                    stopAt: 0,
                    startAt: 30000 // alternatively you could just write: 30*1000
                });
            });
        </script>
    </body>
</html>
于 2013-01-18T09:13:47.330 に答える
3

コード: http://jsfiddle.net/g3rRJ/

時間を時間、分、秒に分割します。そして毎秒時計を減らしました。アルゴは非常に簡単です。私は信じています：

var timer = setInterval(function(){
        seconds--;
        if(seconds == -1) {
            seconds = 59;
            minutes--;

            if(minutes == -1) {
                minutes = 59;
                hours--;

                if(hours==-1) {
                  alert("timer finished");
                  clearInterval(timer);
                  return;
                }
            }
        }
        span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);
于 2013-01-18T02:25:26.057 に答える
3

タイマーが必要な場合は、このプラグインを Jqueryで使用できます。The time または $dbSessionDuration を読み取った後、HTML の隠し要素に入れ、それを jquery カウンター プラグインに入れるだけです。アイデアが興味深いと思われる場合は、私に知らせてください。例を残します。

于 2013-01-19T21:06:12.230 に答える