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


Posted in Javascript onAugust 12, 2015

我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用jQuery实现动态数字展示效果。

查看演示 下载源码

HTML代码

本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用。在HTML页面中只需定义以下结构: 

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

jQuery代码:

首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magic_number()自定义函数将代码整合如下:

function magic_number(value) { 
  var num = $("#number"); 
  num.animate({count: value}, { 
    duration: 500, 
    step: function() { 
      num.text(String(parseInt(this.count))); 
    } 
  }); 
};

然后update()函数使用了jQuery的$.getJSON()向后台number.php发送了一个ajax请求,在得到PHP相应后,调用magic_number()展示最新的数字。

为了能看到更好的效果,我们使用setInterval()设置代码执行的间隔时间。

function update() { 
  $.getJSON("number.php?jsonp=?", function(data) { 
    magic_number(data.n); 
  }); 
}; 
setInterval(update, 5000); //5秒钟执行一次 
update(); 
PHP

实际项目中,我们会使用PHP获取数据库中的最新数据,然后通过PHP返回给前端。本例为了更好的演示,使用随机数字,最后以json格式返回给前端js,number.php代码如下:

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

Javascript 相关文章推荐
重定向实现代码
Nov 20 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
node使用promise替代回调函数
May 07 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 #Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 #Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 #Javascript
javascript表单验证大全
Aug 12 #Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 #Javascript
jQuery实现文件上传进度条特效
Aug 12 #Javascript
XML文件转化成NSData对象的方法
Aug 12 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
jquery 笔记 事件
2011/11/02 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
setTimeout学习小结
2017/02/08 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
学生党员思想汇报范文
2014/01/09 职场文书
无毒社区工作方案
2014/05/23 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
服务员岗位职责
2015/02/03 职场文书
银行求职自荐信范文
2015/03/04 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android