jQuery PHP implements dynamic digital display effects_jquery

HTML

This example assumes that the number of current online users is to be dynamically displayed on the page (without refreshing the entire page, only partially refreshing dynamic numbers), which is commonly used on some statistical platforms. Just define the following structure in the HTML page:

Copy code The code is as follows:

Currently online:

jQuery

First we need to define an animation process, using jQuery’s animate() function to realize the transformation process from one number to another. The following magic_number() custom function integrates the code as follows:

Copy code The code is as follows:

function magic_number(value) {
var num = $("#number");
num.animate({count: value}, {
duration: 500,
         step: function() {
              num.text(String(parseInt(this.count)));
          }
});
};

Then the update() function uses jQuery's $.getJSON() to send an ajax request to the background number.php. After getting the PHP response, it calls magic_number() to display the latest number. In order to see better results, we use setInterval() to set the interval between code execution.

Copy code The code is as follows:

function update() {
$.getJSON("number.php?jsonp=?", function(data) {
         magic_number(data.n);
});
};
setInterval(update, 5000); //Execute once every 5 seconds
update();

PHP

In the actual project, we will use PHP to obtain the latest data in the database, and then return it to the front end through PHP. In this example, for a better demonstration, random numbers are used, and finally returned to the front-end js in json format. The number.php code is as follows:

Copy code The code is as follows:

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

The above is the jQuery PHP code that this article shares with you to implement dynamic digital display effects. I hope you will like it.