Realizing dynamic digital display effect based on jQuery_jquery

We need to dynamically display data in some applications, such as the current number of people online, the current total transaction amount, the current exchange rate, etc. The front-end page needs to be refreshed in real time to obtain the latest data. This article will use examples to introduce you to the use of jQuery to achieve dynamic digital display effects.

View demo Download source code

HTML code

This example assumes that the number of current online users is to be dynamically displayed on the page (without refreshing the entire page, only partially refreshing dynamic numbers), which is commonly used on some statistical platforms. Just define the following structure in the HTML page:

<div class="count">当前在线：<span id="number">
</span>
</div>

jQuery code:

First we need to define an animation process, using jQuery’s animate() function to realize the transformation process from one number to another. 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. After getting the PHP response, it 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 obtain 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 number.php code is as follows:

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