动态数字显示特效的实现

HTML

这个示例假设我们需要动态地在页面上显示(不刷新整个页面,只需刷新本地的动态编号)。当前在线用户的数量经常应用在一些统计平台上:

复制代码代码如下所示:

当前在线:



jQuery

首先,我们需要定义一个动画程序,使用jQuery的动画()函数将进程从一个数字到另一个,和下面的magic_number()自定义功能集成的代码如下。

复制代码代码如下所示:

功能magic_number(值){

Num = $(var#号);

num.animate({计数:值},{

持续时间:500,

步骤:函数(){

num.text(字符串(parseInt(这个数)));

}

});

};



然后更新()函数使用jQuery的getJSON()发送一个Ajax请求的背景number.php。得到相应的PHP后,它要求magic_number()显示最新的号码,为了看到更好的结果,我们使用setInterval()设置的代码执行的时间间隔。

复制代码代码如下所示:

函数更新(){

美元。getJSON(号。phpjsonp =

magic_number(数据。n);

});

};

setInterval(更新5000); / / 5秒的执行

更新();



PHP

在实际工程中,我们将使用PHP数据库中获取最新的数据,然后返回给前端通过PHP。为了更好的演示,本例中使用的随机数,最后返回JSON格式的前端JS,和number.php代码如下:

复制代码代码如下所示:

total_data美元=阵列(

兰德(0999)

);

echo $ _get { 'jsonp}。'('。json_encode($ total_data)')。;



以上是分享动态数字显示特效的代码,希望大家能喜欢。