jquery+php realize dynamic Digital display special effects _jquery

Html

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:

Copy Code code as follows:

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

Jquery

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:

Copy Code 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.

Copy Code code as follows:

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:

Copy Code code as follows:

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

The above is the article to share the jquery+php realize dynamic Digital Display special effects code, I hope we can enjoy.