登录  /  注册
首页 > web前端 > js教程 > 正文

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

php中文网
发布： 2016-05-16 16:09:35
原创
1219人浏览过

HTML

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

复制代码 代码如下:

当前在线：

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实现动态数字展示特效的代码，希望大家能够喜欢。

相关标签：
jQuery PHP 动态 数字 展示
来源：php中文网
上一篇：jQuery插件jFade实现鼠标经过的图片高亮其它变暗_jquery 下一篇：jQuery+slidereveal实现的面板滑动侧边展出效果_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Redux 状态无法正确访问后端 (mySQL) 数据 我在后端（mySQL）和前端之间渲染数据时遇到了问题。我已经在reduxdevtools和控制台日志中进行了调试，但仍然找不到原因。数据在控制台日志中正确获取，但当我记录我的状态时...
P粉139351297来自于2023-09-20 10:40:44
0 1 117
根据用户输入从数据集中筛选数据的问题 以下是我迄今为止尝试过的概述：我有一个searchInput元素，用户可以在其中输入他们的搜索查询。当searchInput的值发生变化时，我使用一个函数来处理过滤过程。过滤函数循...
P粉903969231来自于2023-09-20 09:37:52
0 1 257
Axios GET 请求被前端中的某些内容修改 在这个动作中，我在URL“api/media/action”上有一个基本的GET响应exportconstlistWorks=async(dispatch)=>{try{di...
P粉195200437来自于2023-09-20 08:39:45
0 1 197
如何正确使用计算器？ :root{--offset:30px;}.grid-cols-custom{/*使用自定义属性和calc()计算列宽*/grid-template-columns:calc((4...
P粉046878197来自于2023-09-19 23:56:39
0 1 272
这节课的意思是依赖注入等于脱了裤子放屁？ 这节课的意思是依赖注入等于脱了裤子放屁？
小多来自于2023-09-20 22:24:24
0 0 40
使用WebRTC和Javascript录制多个标签页 我目前能够录制一个标签页，并从其流创建一个媒体录制器。我希望能够切换到另一个标签页并在另一个标签页上继续进行同样的录制，然后最后提供一个拼接好的视频。我该如何实现这个？
P粉571233520来自于2023-09-19 23:07:01
0 1 189
重置“startButtonGame”的可见性是唯一的问题；其他一切都正常工作 我正在开发一个21点游戏。到目前为止，除了这个小细节之外，一切都正常。基本上，开始游戏按钮只应在游戏之前和游戏之后可见。我没有问题，可以将其设置为隐藏，但是当我完成一局游戏时，它不...
P粉614840363来自于2023-09-19 22:02:31
0 1 253
作为主要部分使用的图片的最佳实践是什么？ 我有一个使用图片作为主要部分的部分。问题是图片对于手机、平板电脑和台式机来说太大了，有1MB。我担心图片太大了。我想知道在使用图片作为主要部分背景时的最佳实践。谢谢您的友善建议和意...
P粉727416639来自于2023-09-19 20:54:07
0 1 211
PHP：比较数组的数组并在值匹配时创建新数组 这里是一个示例数据集$all_items=array($a1=array(name=>"item1",description=>"item...
P粉323224129来自于2023-09-19 19:48:02
0 1 222
关闭：MySQL更新查询以增加特定值 如何使用相同的值增加更新mysql列Id名称更新A（期望）更新B（期望）1AAAAA112AAAAA123AAAAA134BBBBB215BBBBB226CCCCC317CCCCC...
P粉129275658来自于2023-09-19 18:36:24
0 1 275
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 立即咨询

  • 微信沟通

  • QQ群

  • 优惠券

  • 返回顶部