GOOCODE - Find your code/scripts

3 We need a dynamic display of data in some applications, such as the current line number, the current transaction total, at current exchange rates, etc., need real-time refresh the front page for the latest data. This article will tell you with examples using jQuery and PHP to achieve dynamic digital display effect.

HTML
This example assumes that you want to dynamically display on the page (without refreshing the entire page, just refresh the local dynamic digital) of the current number of online users, commonly used in some statistical platform. Simply define the following structure in an HTML page:

<div class="count">Online: <span id="number"></span></div> 

jQuery
First we need to define an animation process, using jQuery animate () function to achieve from a digital-to-digital conversion process to another, following magic_number () custom function to integrate the code below:

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

Then update () function uses the jQuery $ .getJSON () sends an ajax request to the backend number.php, after obtaining the appropriate PHP call magic_number () show the latest figures. In order to see better results, we use the setInterval () to set the interval time code execution.

function update() { 
    $.getJSON("number.php?jsonp=?", function(data) { 
        magic_number(data.n); 
    }); 
}; 
 
setInterval(update, 5000); //excute per 5 sec
update(); 

PHP
The actual project, we will use PHP to obtain the latest data from the database, and then return to the front by PHP. In order to better demonstrate this example, the use of random numbers, and finally returned to the front in json format js, number.php code is as follows:

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