jQuery PHP implémente l'affichage numérique dynamique effect_jquery

HTML

Cet exemple suppose que le nombre d'utilisateurs en ligne actuels doit être affiché dynamiquement sur la page (sans actualiser la page entière, actualisant seulement partiellement les nombres dynamiques), ce qui est couramment utilisé sur certaines plateformes statistiques. Définissez simplement la structure suivante dans la page HTML :

Copier le code Le code est le suivant :

Actuellement en ligne :

jQuery

Nous devons d'abord définir un processus d'animation, en utilisant la fonction animate() de jQuery pour réaliser le processus de transformation d'un nombre à un autre. La fonction personnalisée magic_number() suivante intègre le code comme suit :

Copier le code Le code est le suivant :

function numéro_magique(valeur) {
var num = $("#numéro");
num.animate({count : valeur}, {
durée : 500,
         étape : function() {
              num.text(String(parseInt(this.count)));           }
});
};

Ensuite, la fonction update() utilise $.getJSON() de jQuery pour envoyer une requête ajax au background.php Après avoir obtenu la réponse PHP, elle appelle magic_number() pour afficher le dernier numéro. Afin d'obtenir de meilleurs résultats, nous utilisons setInterval() pour définir l'intervalle entre l'exécution du code.

Copier le code Le code est le suivant :

fonction mise à jour() {

$.getJSON("number.php?jsonp=?", function(data) {
         magic_number(data.n);
});
};
setInterval(update, 5000); //Exécuter une fois toutes les 5 secondes
mise à jour();

PHP

Dans le projet actuel, nous utiliserons PHP pour obtenir les dernières données de la base de données, puis les renverrons au front-end via PHP. Dans cet exemple, pour une meilleure démonstration, des nombres aléatoires sont utilisés, et finalement renvoyés au front-end js au format json. Le code number.php est le suivant :

.

Copier le code Le code est le suivant :

$total_data = tableau(

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

Ce qui précède est le code PHP jQuery que cet article partage avec vous pour implémenter des effets d'affichage numérique dynamiques. J'espère que vous l'aimerez.