jquery php implémente les effets numériques de défilement_jquery

Parfois, nous devons afficher dynamiquement le nombre de visites, de téléchargements et d'autres effets. Nous pouvons utiliser jQuery combiné avec php d'arrière-plan pour obtenir un effet d'affichage numérique déroulant.

Cet article utilise l'acquisition en temps réel du nombre de téléchargements d'un produit comme scénario. Le frontend exécute régulièrement javascript pour obtenir le dernier nombre de téléchargements et met à jour le nombre de téléchargements sur la page de manière continue.
HTML
Nous chargeons d'abord le fichier de la bibliothèque jQuery et le plug-in d'arrière-plan animé : animateBackground-plugin.js.

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

Ensuite, nous ajoutons l'élément html pour afficher l'effet de défilement numérique à la position appropriée sur la page.

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

jQuery
Tout d’abord, écrivons une fonction show_num(), qui est utilisée pour implémenter des nombres glissants dynamiques. Nous divisons le nombre statistique n en nombres individuels. Ces nombres sont entourés de , et l'image est positionnée sur chaque numéro correspondant en appelant le plug-in 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(){} 
    ); 
  } 
} 

Ensuite, nous obtenons le dernier nombre de téléchargements en arrière-plan via ajax. Le code suivant est une requête ajax jQuery courante. Il effectue une requête de publication vers data.php, data.php ou obtient le dernier nombre de téléchargements. Après un traitement réussi, le nombre de téléchargements est obtenu : data.count, puis appelle show_num. () pour implémenter le défilement numérique.

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

Enfin, nous devons initialiser les données après le chargement de la page, puis effectuer une requête ajax toutes les 3 secondes pour mettre à jour le nombre de téléchargements :

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

De même, il peut être utilisé dans les statistiques de visites de sites Web, les temps de lecture de vidéos, les comptes à rebours, etc. Quant à la façon dont le backend data.php traite les données, cela dépasse le cadre de cet article. comme programme de compteur pour renvoyer data.count.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.