当前位置:首页 > 日记 > 正文

基于jQuery的动态数字显示效果的实现

基于jQuery的动态数字显示效果的实现
在某些应用中,需要动态地显示数据,如当前在线人数,目前交易总金额、当前汇率等,和前面的页面需要刷新和实时获取最新数据。本文将介绍一个实例介绍了利用jQuery动态数字显示的影响。
查看演示下载源码

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)')。;

相关文章

ai绘制非常漂亮的玻璃纹理云图标

ai绘制非常漂亮的玻璃纹理云图标

绘制,纹理,云图,玻璃,漂亮,本教程是介绍给朋友,使用AI绘制非常美丽的玻璃质感和云图标。画画的效果很美,难度也不大。非常适合初学者学习,推荐朋友一起来。 本教程是介绍一个朋友如何绘制美丽的玻璃质感和云图标的过程与人工智能。这个教程很…

如何解锁ps层中ps层的解锁方法

如何解锁ps层中ps层的解锁方法

解锁,方法,层中,电脑软件,ps,每一个初学的人恳求华通行将遇到一个问题,即如何解锁图层。接下来,小编将介绍PS层解锁方法适合你。让我们看一看。 在PS图象处理软件,我们需要操作层频繁,和萧百,谁就是学习PS,可以通过一些简单的问题难倒了。例如,在…

我听说你想成为艺术总监和设计总监

我听说你想成为艺术总监和设计总监

你想,之路,我听,总监,艺术总监,这本教科书是一本理论教程,对那些想在设计总监的指导下工作的朋友们是非常有启发性的。 不同的设计师和插图画家有不同的职业道路。今天,让我们在艺术和创意总监的职业道路,一看。 在设计领域,设计总监扮演了多…

Word2003选定所有相同格式的文本格

Word2003选定所有相同格式的文本格

教程,文本,格式,电脑软件,1,如果不开;样式和格式任务窗格;(任务窗格:窗户在Office程序中提供常用命令的位置是合适的,尺寸小,可以使用这些命令,一边继续处理文件,请单击格式);;工具栏(工具栏:包含按钮和选项,可以用来执行命令。要显示工具栏,按下Alt键按下S…

动态浮动导航菜单代码共享

动态浮动导航菜单代码共享

导航菜单,浮动,动态,代码,电脑软件,这是一个基于jQuery的特效代码,实现了浮动浮动导航菜单。菜单上下浮动,充满生机和活力。这是一个非常实用的导航菜单源代码。 运行效果图: 单击下载源代码 jQuery动态浮动导航菜单代码,供大家分享,如下所示 …

滑动特殊代码的jQuery实现

滑动特殊代码的jQuery实现

代码,电脑软件,jQuery,在项目中,需要使用jQuery来实现滑动效果,因此相关的内容安排如下。下面是详细的说明,文字说明和代码分析,和你需要的朋友可以学习。 实现方式1: ({ } {时间。slideup,完成})-目标元素上滑倒了,隐藏; slideDown({ } {。时间,完…

自动修正流量的好处是什么QQ常见问

自动修正流量的好处是什么QQ常见问

流量,常见问题,修正,好处,电脑软件,自动修正流量的好处是什么 自动更正流量自动发送短信,帮助您纠正手机流量,使您的流量与操作者实时同步。 注意:您可以在流量监控设置中打开自动更正流量,但在打开时,您需要配置第一;这台机器属于sim型,它帮助…

痛苦的超级感性人格签名

痛苦的超级感性人格签名

感性,人格,痛苦,电脑软件,以下是你编译的悲伤和悲伤的个性签名的内容。如果你喜欢小编辑的建议,请继续关注它。 回想起来,我们用坚强的姿态,面对时间,它是如此苍白。 慢慢发现,爱一个人就是毁灭原来的自己。 依赖是可怕的。一旦你倒下,你就会觉得…

图PS图象处理软件阿凡达技术概述PS

图PS图象处理软件阿凡达技术概述PS

图象,处理软件,实用技巧,阿凡,技术,一个人的面部特征要求很高。mdash;mdash;不同的人的脸上都是由相同的部分和这些组件的微妙变化引起人体和人脸之间的差异。本节将读者渐渐明白规则与面绘制技术。在后面部分的示例中,我们将让读者练习特定字…

ai绘制美丽精致的黑白咒语图案。

ai绘制美丽精致的黑白咒语图案。

绘制,咒语,图案,黑白,精致,本教程是介绍一个美丽和精美的黑白曼陀罗图案的朋友,ai,这是非常美丽和困难的。推荐的朋友可以跟着教程一起学习。我希望你能喜欢它。 本教程教AI学习者使用AI绘制优美的曼陀罗图案。教程的设计很漂亮,很难制作。推…

jQuery倾斜级联特效代码共享

jQuery倾斜级联特效代码共享

级联,特效代码,电脑软件,jQuery,本文的示例讲述了jQuery图片倾斜级联开关的特效代码,供大家参考: 这是一个基于图像切换效果代码CSS3倾斜的基础上jquery.roundabout.js。它有层次感,还可以切换。一个非常新的代码示例。 兼营:---------------…

四文本框格式排版方法Word2003教程

四文本框格式排版方法Word2003教程

方法,教程,文本框,格式,电脑软件,很多朋友使用Word2003编辑一些特殊布局的Word文档,往往需要在文本框中的文本框的用词,虽然操作简单,大部分的朋友也会用,但用的时间长了,我们会发现许多小技巧,下面是一些文本框在网络排版技术收集,你可以灵活的使…