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

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 コードです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。