Réalisation d'un effet d'affichage numérique dynamique basé sur jQuery_jquery

Nous devons afficher dynamiquement des données dans certaines applications, telles que le nombre actuel de personnes en ligne, le montant total actuel de la transaction, le taux de change actuel, etc. La page d'accueil doit être actualisée en temps réel pour obtenir le dernières données. Cet article utilisera des exemples pour vous présenter l'utilisation de jQuery pour obtenir des effets d'affichage numérique dynamiques.

Voir la démo Télécharger le code source

Code 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 :

<div class="count">当前在线：<span id="number">
</span>
</div>

Code 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 :

function magic_number(value) { 
  var num = $("#number"); 
  num.animate({count: value}, { 
    duration: 500, 
    step: 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.

function update() { 
  $.getJSON("number.php?jsonp=?", function(data) { 
    magic_number(data.n); 
  }); 
}; 
setInterval(update, 5000); //5秒钟执行一次 
update(); 
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 :
.

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