jQuery+PHP实现动态数字展示特效


Posted in Javascript onMarch 14, 2015

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

以上就是本文给大家分享的jQuery+PHP实现动态数字展示特效的代码,希望大家能够喜欢。

Javascript 相关文章推荐
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
angular+webpack2实战例子
May 23 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
原生js实现随机点名
Jul 05 Javascript
three.js 如何制作魔方
Jul 31 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 #Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 #Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 #Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
You might like
Ajax PHP分页演示
2007/01/02 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
在Django中创建第一个静态视图
2015/07/15 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python元组的概念知识点
2019/11/19 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
Java程序员面试题
2016/09/27 面试题
学校万圣节活动方案
2014/02/13 职场文书
四年大学自我鉴定
2014/02/17 职场文书
应届毕业生自荐信
2014/05/28 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang