jQuery PHP は動的なデジタル表示効果を実装します

jQuery PHP は動的なデジタル表示効果を実装します_jquery

WBOY

リリース： 2016-05-16 16:09:35

オリジナル

1640 人が閲覧しました

HTML

この例では、現在のオンラインユーザーの数がページ上に動的に表示されることを前提としています (ページ全体を更新せず、動的数値を部分的に更新するだけです)。これは一部の統計プラットフォームでよく使用されます。 HTML ページで次の構造を定義するだけです:

コードをコピーしますコードは次のとおりです:

現在オンライン:

jQuery

まず、jQuery の animate() 関数を使用して、ある数値から別の数値への変換プロセスを実現するアニメーションプロセスを定義する必要があります。次の magic_number() カスタム関数は、次のようにコードを統合します。

コードをコピーしますコードは次のとおりです:

function magic_number(value) { 

var num = $("#number");
num.animate({カウント: 値}, { 

期間: 500、

ステップ: function() { 

num.text(String(parseInt(this.count)));
} 

}); 

}; 

次に、update() 関数は jQuery の $.getJSON() を使用して、バックグラウンドのnumber.php に ajax リクエストを送信し、PHP 応答を取得した後、magic_number() を呼び出して最新の番号を表示します。より良い結果を得るために、setInterval() を使用してコードの実行間隔を設定します。

コードをコピーしますコードは次のとおりです: 関数 update() {

$.getJSON("number.php?jsonp=?", function(data) {

magic_number(data.n);
}); 

}; 

setInterval(update, 5000); // 5 秒ごとに実行 

更新(); 

PHP

実際のプロジェクトでは、PHP を使用してデータベース内の最新データを取得し、PHP を通じてフロントエンドに返します。この例では、より分かりやすいデモとして、乱数が使用され、最終的に json 形式でフロントエンド js に返されます。 のコードは次のとおりです。

コードをコピーします

コードは次のとおりです: $total_data = array( 'n' => ランド(0,999)

);

echo $_GET['jsonp'].'('.json_encode($total_data) . ')';

上記は、動的なデジタル表示効果を実装するためにこの記事で共有する jQuery PHP コードです。