jquery PHP implementiert scrollende digitale Effekte_jquery

Manchmal müssen wir die Anzahl der Besuche, Downloads und andere Effekte dynamisch anzeigen. Wir können jQuery in Kombination mit Hintergrund-PHP verwenden, um einen rollierenden digitalen Anzeigeeffekt zu erzielen.

Dieser Artikel verwendet die Echtzeiterfassung der Download-Anzahl eines Produkts als Szenario. Das Frontend führt regelmäßig Javascript aus, um die neueste Download-Anzahl zu erhalten, und aktualisiert die Download-Anzahl auf der Seite fortlaufend.
HTML
Wir laden zunächst die jQuery-Bibliotheksdatei und das animierte Hintergrund-Plug-in: animateBackground-plugin.js.

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

Dann fügen wir das HTML-Element hinzu, um den digitalen Scrolleffekt an der entsprechenden Position auf der Seite anzuzeigen.

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

jQuery
Schreiben wir zunächst eine Funktion show_num(), mit der dynamische rollierende Zahlen implementiert werden. Wir teilen die statistische Zahl n in einzelne Zahlen auf. Diese Zahlen werden von umgeben und das Bild wird auf jeder entsprechenden Zahl positioniert, indem das Plug-in „backgroundPosition“ aufgerufen wird.

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(){} 
    ); 
  } 
} 

Als nächstes erhalten wir im Hintergrund über Ajax die neueste Download-Zählung. Der folgende Code ist eine übliche jQuery-Ajax-Anfrage. Er sendet eine Post-Anfrage an data.php, data.php oder ruft nach erfolgreicher Verarbeitung die Anzahl der Downloads ab und ruft dann show_num auf (), um digitales Scrollen zu implementieren.

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

Schließlich müssen wir die Daten initialisieren, nachdem die Seite geladen wurde, und dann alle 3 Sekunden eine Ajax-Anfrage durchführen, um die Anzahl der Downloads zu aktualisieren:

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

In ähnlicher Weise kann es in Statistiken zu Website-Besuchen, Videowiedergabezeiten, Countdowns usw. verwendet werden. Die Art und Weise, wie das Backend data.php Daten verarbeitet, würde den Rahmen dieses Artikels sprengen als Zähler. Programm zur Rückgabe von data.count.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.