jQuery_jqueryをベースにしたダイナミックなデジタル表示効果を実現

一部のアプリケーションでは、現在のオンライン人数、現在の総取引額、現在の為替レートなどのデータを動的に表示する必要があります。最新のデータ。この記事では、動的なデジタル表示効果を実現するための jQuery の使用方法を例を使用して紹介します。

デモを見る ソース コードをダウンロード

HTML コード

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

<div class="count">当前在线：<span id="number">
</span>
</div>

jQuery コード:

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

function magic_number(value) { 
  var num = $("#number"); 
  num.animate({count: value}, { 
    duration: 500, 
    step: function() { 
      num.text(String(parseInt(this.count))); 
    } 
  }); 
}; 

次に、update() 関数は jQuery の $.getJSON() を使用して、バックグラウンドのnumber.php に ajax リクエストを送信し、PHP 応答を取得した後、magic_number() を呼び出して最新の番号を表示します。

より良い結果を得るために、setInterval() を使用してコードの実行間隔を設定します。

function update() { 
  $.getJSON("number.php?jsonp=?", function(data) { 
    magic_number(data.n); 
  }); 
}; 
setInterval(update, 5000); //5秒钟执行一次 
update(); 
PHP

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

のコードは次のとおりです。

$total_data = array( 
  'n' => rand(0,999) 
);   
echo $_GET['jsonp'].'('. json_encode($total_data) . ')';