Examples of online numbers of PHP and jquery real-time display sites

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:

The code is as follows	Copy Code
<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:

code is as follows	copy code
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.

The code is as follows	Copy Code
function Update () { $.getjson ("number.php?jsonp=?", function (data) { Magic_number (DATA.N); }); }; SetInterval (update, 5000); 5 Seconds to execute once Update ();

Php

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:

The code is as follows	Copy Code
$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.