jquery实时展示网址在线人数的艺术,php实现滚动

作者: 关于计算机  发布:2019-09-03

偶尔候我们须求动态的呈现访问次数、下载次数等效果,大家能够依赖jQuery结合后台php落成三个滚动的数显著效果果。

正文实例陈述了PHP+jquery实时体现网址在线人数的不二等秘书技。分享给大家供大家参谋。具体分析如下:

图片 1

在线人数最简易的便是直接使用js调用php,那样能够显得出有几人拜访了本站,如若要在客商未刷新页面包车型大巴情景实时呈现顾客在线人数,大家可以运用jquery ajax来兑现。

本文以实时获取某产品的下载次数为场景,前台按期实行javascript获取最新的下载次数,并滚动更新页面上的下载次数。
HTML
大家率先载入jQuery库文件和卡通背景插件:animateBackground-plugin.js。

小编们在部分行使中要求动态体现数据,比方当前在线人数,当前贸易总额,当前货币的比率等等,前端页面必要实时刷新获取最新数据。这里大家将组成实例给大家介绍使用jQuery和PHP来达成动态数显著效果果。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/animateBackground-plugin.js"></script> 

本例借使要在页面上动态呈现(没有要求刷新整个页面,只是有个别刷新动态数字)当前在线客户数,常见在部分计算平台上应用。在HTML页面中只需定义以下结构:  

然后大家在页面适当的任务中到场要体现数字滚动效应的html成分。

复制代码 代码如下:

<div id="total"> 
  下载量:次 
</div> 

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

jQuery
首先来写四个函数show_num(),该函数用来兑现动态滚动数字。我们将总结数字n进行拆分成三个个独立的数字,这个数字用<i></i>包围,通过调用插件backgroundPosition将图片定位到相应的各样数字上。

首先大家要定义三个动画片进度,使用jQuery的animate()函数完毕从多少个数字到另八个数字的转移进程,以下magic_number()自定义函数将代码整合如下:
 
[code]function magic_number(value) {
    var num = $("#number");
    num.animate({count: value}, {
        duration: 500,
        step: function() {
            num.text(String(parseInt(this.count)));
        }
    });
};

function show_num(n){ 
  var it = $(".t_num i"); 
  var len = String(n).length; 
  for(var i=0;i<len;i++){ 
    if(it.length<=i){ 
      $(".t_num").append("<i></i>"); 
    } 
    var num=String(n).charAt(i); 
    var y = -parseInt(num)*30; //y轴位置 
    var obj = $(".t_num i").eq(i); 
    obj.animate({ //滚动动画 
      backgroundPosition :'(0 '+String(y)+'px)' 
      }, 'slow','swing',function(){} 
    ); 
  } 
} 

然后update()函数使用了jQuery的$.getJSON()向后台number.php发送了一个ajax乞求,在获得PHP相应后,调用magic_number()展现最新的数字。为了能看到更加好的功力,大家使用setInterval()设置代码施行的间隔时间。  

随着,大家通过ajax获取后台最新的下载次数。下边包车型大巴代码是八个分布的jQuery的ajax哀告,通过post诉求到data.php,data.php或获得最新的下载次数,管理成功后则获得下载次数:data.count,然后调用show_num()达成数字滚动。

复制代码 代码如下:

function getdata(){ 
  $.ajax({ 
    url: 'data.php', 
    type: 'POST', 
    dataType: "json", 
    cache: false, 
    timeout: 10000, 
    error: function(){}, 
    success: function(data){ 
      show_num(data.count); 
    } 
    }); 
} 

function update() {
    $.getJSON("number.php?jsonp=?", function(data) {
        magic_number(data.n);
    });
};
 
setInterval(update, 5000); //5分钟试行壹回
update();

谈起底,我们在页面加载完后要起始化数据,然后每隔3分钟推行贰次ajax乞请,更新下载次数:

PHP代码部分:
骨子里项目中,大家会选用PHP获取数据库中的最新数据,然后通过PHP重返给前端。本例为了越来越好的身先士卒,使用随机数字,最终以json格式再次来到给前端js,number.php代码如下:

$(function(){ 
  getdata(); 
  setInterval('getdata()', 3000);//每隔3秒执行一次 
}); 

复制代码 代码如下:

就疑似能够在总括网站访谈量、计算影片播放次数、倒计时等地方得到应用,至于后台data.php怎样管理多少不在本文陈说范围内,风野趣的同桌能够本人写四个诸如计数器之类的后台程序来回到data.count。

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

如上正是本文的全体内容,希望对大家的求学抱有支持。

规律其实极其的简易正是使用js settimeout达成过几秒加载三个php文件进而到达了实时展现在线人数的机能了。

您大概感兴趣的稿子:

  • jQuery实现立体式数字滚动条扩充效果
  • 赶快的jquery数字滚动特效
  • Jquery数字上下滚动动态切换插件
  • jquery宗旨图片切换(数字标记/手动/自动播放/横向滚动)
  • 依靠jQuery完结数字滚动作效果应

指望本文所述对大家的php程序设计有着扶助。

您大概感兴趣的稿子:

  • jquery完毕input输入框实时输入触发事件代码
  • js与jquery实时监听输入框值的oninput与onpropertychange方法
  • JQuery 更动页面字体大小的完毕代码(实时改动网页字体大小)
  • jquery+ajax实现挂号实时验证实例详解
  • jQuery选择头像并实时显示的代码
  • jquery购物车实时买下账单特效完毕思路
  • javascript和jQuery完成网页实时聊天的ajax长轮询
  • 依据Jquery插件Uploadify达成实时体现进程条上传图片
  • jquery 表格排序、实时寻觅表格内容(附图)
  • 动用jquery达成实时更新歌词的措施

本文由王中王开奖结果发布于关于计算机,转载请注明出处:jquery实时展示网址在线人数的艺术,php实现滚动

关键词: