1

さて、すべてを実行することができました - 最後にもう 1 つ。基本的に、1 つの jQuery+ajax 関数で日付に 15 秒が追加され、MySQL に新しい行が追加されます。履歴の最後の 5 行を取得できるように、新しい行を追加する必要があります。

<?php 
include("inc/dblink.inc");
$itemid = intval($_POST['i']);
$bid = intval($_POST['b']);
$row = mysql_fetch_array(mysql_query("SELECT * FROM test WHERE itemid=$itemid ORDER BY bidid DESC LIMIT 0,1"));
$date = $row['date'];
$newdate = strtotime($date);
$newerdate = ($newdate + 15);
$newestdate = date("Y-m-d H:i:s", $newerdate);
mysql_query("INSERT INTO test (date,bid,itemid) VALUES ('$newestdate','$bid','$itemid')");
?>

2 番目のスクリプトは 1 秒ごとに更新し、テーブルのデータを表示します。

<script type="text/javascript">
var auto_refresh = setInterval(
function()
{
$('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();
$.ajax({
    type: "POST",
    url: "gettime.php",
    data: ({i : <?=$itemid;?>}),
    success: function(data){
        var s = data;
        var t = s.split(/[- :]/);
        var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
        $('#defaultCountdown').countdown({until: d,compact: true, 
        description: ''});
    }
});
}, 1000);
</script>

ここに gettime.php があります

<?php 
include("inc/dblink.inc");
$itemid = intval($_POST['i']);
$row = mysql_fetch_array(mysql_query("SELECT * FROM test WHERE itemid='$itemid' ORDER BY bidid DESC LIMIT 0,1"));
$date = $row['date'];
echo $date;
?>

また、 http://keith-wood.name/js/jquery.countdown.jsにある Keith Wood の jQuery カウントダウン スクリプトも使用しました。

問題：

このライン$('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();いいですね。15 秒追加された新しい時間は問題なく表示されます。それは私が問題を抱えているカウントダウンです。タイマーに 15 秒追加されませんが、ページ全体を更新すると、15 秒追加されたことがわかります。

私は何を間違っていますか？jQueryでかなり新しい。ありがとう！

ここで実際の動作を見ることができます。

4

4 に答える 4

3

ここには大きな問題がいくつかあり、小さな問題もいくつかあります。

日付形式

書式設定された日付ではなく、UNIX タイムスタンプを使用する方がはるかに簡単です。この点で、PHP と JavaScript は非常に似ています。どちらも同じ「エポック」、1970 年 1 月 1 日 00:00 に基づいています。UNIX/PHP はその日付から数秒で動作し、javascript はミリ秒で動作します。したがって、トリッキーな文字列処理を必要とせずにJavaScriptDateオブジェクトを初期化できます。new Date(unix_timestamp * 1000);

秒読み

カウントダウンは、1 秒の分解能でゼロまでフリーランするように設計されています (その後、オプションのコールバック関数を起動します)。ポーリング間隔が 1 秒の場合、カウントダウン タイマーを毎回再初期化する必要はありません。返されたタイムスタンプが変更された場合のみです。

効率

を使用setintervalすると、関数の外側でできるだけ多くのオブジェクト/文字列を作成する方が、クライアント プロセッサに優しくなりますsetinterval。これは特に (静的) セレクターを使用する jQuery ステートメントに当てはまります。これは (潜在的に大きい) DOM が検索されるためです。

すべてをまとめると、私の JavaScript は次のようになります。

$(function(){
    var $$ = {//cached jQuery objects
        timeleft: $('#timeleft'),
        defaultCountdown: $('#defaultCountdown')
    };
    var map_1 = {//namespace for setInterval and countdown data
        url: 'gettime.php',
        lastTimeStamp: 0,
        countdown_settings: {until:null, compact:true, description:''},
        itemid: <?=$itemid;?>
    };
    var auto_refresh = setInterval(function() {
        $$.timeleft.load(map_1.url, {i:map_1.itemid}).show();
        $.ajax({
            type: "POST",
            url: map_1.url,
            data: {i:map_1.itemid},
            success: function(unixTimeStamp) {
                unixTimeStamp = parseInt(unixTimeStamp);
                if(unixTimeStamp !== map_1.lastTimeStamp) {
                    map_1.countdown_settings.until = new Date(parseInt(unixTimeStamp) * 1000);
                    $$.defaultCountdown.countdown(map_1.countdown_settings);
                    map_1.lastTimeStamp = unixTimeStamp;
                }
            }
        });
    }, 1000);
});

もちろん、これを機能させるecho $date;には、日付の UNIX タイムスタンプ表現をエコーするように PHP ステートメントを変更する必要があります。これは、データベースに保存されている日付形式の知識があれば、かなり簡単です。

編集: Unix エポックは 12:00 (正午) ではなく、1970 年 1 月 1 日の 00:00 (真夜中) です。Javascript は同じなので、コードに悪影響はありません。

于 2012-04-17T23:31:09.607 に答える
2

日付オブジェクト、つまり「d」は、ページが初めて読み込まれたときに一度だけ初期化されます。カウントダウン関数を実行するたびに再初期化する方法を見つけてください。

于 2012-04-13T10:14:17.770 に答える
1

この行のphpスクリプト変数は1回だけ生成されると思います。そのため、1回だけ機能します（つまり、ページが更新されるたびに）。

 $('#timeleft').load('gettime.php', { i: <?=$itemid;?> }).show();

JS成功コードを更新して変数を更新し、呼び出しごとにページが更新されるようにします。

于 2012-04-13T10:16:05.480 に答える
1

これを ajax に追加します。

$('#defaultCountdown').countdown('option', {
    format: 'DHMS', until : d
});

私のために働きます。

于 2012-09-19T18:29:12.153 に答える