Jq data list dynamic effect, dynamic update, support Ajax dynamic refresh.
We need to dynamically display data in some applications, such as the current online number, the current total transaction amount, the current exchange rate, quotation, etc. The front-end page needs to be refreshed in real time to obtain the latest data. This article will introduce the use of jQuery to achieve dynamic digital display effects with examples.
HTML code
This example assumes that the current number of online users is to be displayed dynamically on the page (without refreshing the entire page, but only partially refreshing the dynamic numbers), which is commonly used on some statistical platforms. In the HTML page just define the following structure:
<div class="count">当前报价：<span id="number"></span></div>
jQuery code:
First of all, we need to define an animation process, and use jQuery's animate() function to realize the transformation process from one number to another number. The following magic_number() custom function integrates 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))); } }); };
Then the update() function uses jQuery's $.getJSON() to send an ajax request to the background number.php, and after getting the PHP response, calls magic_number() to display the latest number.
In order to see better results, we use setInterval() to set the interval between code execution.
function update() { $.getJSON("number.php?jsonp=?", function(data) { magic_number(data.n); }); }; setInterval(update, 5000); //5秒钟执行一次 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 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 code of number.php is as follows:
$total_data = array( 'n' => rand(0,999) ); echo $_GET['jsonp'].'('. json_encode($total_data) . ')';