jquery+phpでダイナミックなデジタル表示効果を実現

今回は、動的なデジタル表示効果を実現するための jquery + php を紹介します。 jquery + php を使用して動的なデジタル表示効果を実現するための 注意事項は何ですか。以下は実際的なケースです。

訪問数、ダウンロード数、その他の効果を動的に表示する必要がある場合は、jQuery をバックグラウンド PHP と組み合わせて使用​​して、ローリング デジタル表示効果を実現できます。

この記事では、商品のダウンロード数をリアルタイムで取得するシナリオを使用しています。フロントデスクは

javascriptを実行して最新のダウンロード数を取得し、ページをスクロールしてダウンロード数を更新します。
HTMLまず、jQuery ライブラリ ファイルとアニメーション バックグラウンド プラグイン: animate
Background-plugin.js を読み込みます。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>

次に、

html 要素 を追加して、ページ上の適切な位置にデジタル スクロール効果を表示します。

<p id="total"> 
  下载量：<span class="t_num"></span>次 
</p>

jQueryまず、動的なローリング数値を実装するために使用される関数 show_num() を作成します。統計数値 n を個別の数値に分割し、これらの数値を で囲み、プラグインbackgroundPositionを呼び出すことで、対応する各数値に画像を配置します。

function show_num(n){ 
  var it = $(".t_num i"); 
  var len = String(n).length; 
  for(var i=0;i<len;i++){ 
    if(it.length<=i){ 
      $(".t_num").append("<i></i>"); 
    } 
    var num=String(n).charAt(i); 
    var y = -parseInt(num)*30; //y轴位置 
    var obj = $(".t_num i").eq(i); 
    obj.animate({ //滚动动画 
      backgroundPosition :'(0 '+String(y)+'px)' 
      }, 'slow','swing',function(){} 
    ); 
  } 
}

次に、ajax を介してバックグラウンドで最新のダウンロード数を取得します。次のコードは、一般的な jQuery ajax リクエストです。data.php、data.php への

post request を介して、処理が成功した後、ダウンロード数を取得します: data.count を呼び出します。 show_num() を使用して数値をスクロールします。

function getdata(){ 
  $.ajax({ 
    url: 'data.php', 
    type: 'POST', 
    dataType: "json", 
    cache: false, 
    timeout: 10000, 
    error: function(){}, 
    success: function(data){ 
      show_num(data.count); 
    } 
    }); 
}

最後に、ページがロードされた後にデータを初期化し、ダウンロード数を更新するために 3 秒ごとに ajax リクエストを実行する必要があります:

$(function(){ 
  getdata(); 
  setInterval('getdata()', 3000);//每隔3秒执行一次 
});

同様に、Web サイトの訪問数の統計、Web サイトの訪問数の統計から取得できます。ビデオの再生時間、カウントダウンなど。アプリケーション、バックグラウンド data.php がデータを処理する方法については、この記事の範囲外です。興味のある学生は、data.count を返すカウンターなどのバックグラウンド プログラムを作成できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery アニメーション効果の画像カルーセルの実装 (コード付き)

jQuery の実装画像カルーセル スライドショー効果

以上がjquery+phpでダイナミックなデジタル表示効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。