动态数字显示特效的实现
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)')。;
以上是分享动态数字显示特效的代码,希望大家能喜欢。