jquery+php réalise un effet d'affichage numérique dynamique

Cette fois, je vais vous apporter jquery+php pour obtenir un effet d'affichage numérique dynamique. Quelles sont les précautions pour jquery+php pour obtenir un effet d'affichage numérique dynamique. Ce qui suit est un cas pratique, prenons un. regarder.

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 comme scénario l'acquisition en temps réel du nombre de téléchargements d'un produit La réception exécute javascript régulièrement pour obtenir le. dernier nombre de téléchargements et fait défiler pour mettre à jour les téléchargements sur la fréquence.
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.

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

jQuery
Tout d'abord, écrivons une fonction show_num(), qui est utilisée pour implémenter des nombres roulants 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. Via post request vers data.php, data.php ou obtenez le dernier nombre de téléchargements. Après un traitement réussi, le nombre de téléchargements sera obtenu : data.count. , puis appelez 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, vous pouvez le trouver sur le site de statistiques. Le nombre de visites, les statistiques de temps de lecture vidéo, le compte à rebours, etc. sont utilisés. Quant à la façon dont data.php traite les données, cela dépasse le cadre de cet article. un programme d'arrière-plan tel qu'un compteur pour renvoyer data.count.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation du carrousel d'images de l'effet d'animation JQuery (avec code)

Diaporama du carrousel d'images jQuery Effet de film

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!