PHP and jquery real-time display website Online Number example detailed _php example

In some applications we need to dynamically display data, such as current online numbers, current total transactions, current exchange rates, and so on, front-end pages need real-time refresh to get the latest data. This article will be combined with examples to introduce the use of jquery and PHP to achieve dynamic digital display effect.

This example assumes a dynamic display on the page (no need to refresh the entire page, but only local refresh dynamic numbers) The current number of online users, commonly used in some statistical platforms. You only need to define the following structure in an HTML page:

<div class= "Count" > Current online: <span id= "Number" ></span></div>

First we define an animation process that uses the animate () function of jquery to implement a transform from one number to another, and the following magic_number () Custom function consolidates the code as follows:

function Magic_number (value) { 
  var num = $ ("#number"); 
  Num.animate ({Count:value}, { 
    duration:500, 
    step:function () { 
      num.text (String (parseint (This.count))); 
  }); 
};

The update () function then uses jquery's $.getjson () to send an AJAX request to the background number.php, which, after getting PHP, invokes Magic_number () to show the latest numbers. To see better results, we use setinterval () to set the time interval for code execution.

function Update () { 
  $.getjson ("number.php?jsonp=?", function (data) { 
    magic_number (DATA.N); 
  }); 
 
SetInterval (update, 5000); 5 Seconds to perform an 
update (); 
 

PHP section

In the actual project, we will use PHP to get the latest data in the database and then return it to the front end via PHP. For better Demos, this example uses random numbers, and finally returns to the front end js,number.php code in JSON format as follows:

$total _data = Array ( 
  ' n ' => rand (0,999) 
);   
echo $_get[' Jsonp ']. ' ('. Json_encode ($total _data). ')';

The principle is very simple is the use of JS settimeout to achieve a few seconds to load a PHP file to achieve real-time display online number of functions.

Thank you for reading, I hope to help you, thank you for your support for this site!