原生js手写翻页效果

最新推荐文章于 2022-02-05 22:53:15 发布
最新推荐文章于 2022-02-05 22:53:15 发布
阅读量680 收藏
点赞数
分类专栏： JavaScript 文章标签： web前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ymm_0008/article/details/54925678
版权

Html部分:

<div class="twright">

                    <div id="group_emotion_loading" style="display:block;text-align:center;">正在加载，请稍后...</div>

                    <div id="influeweibo" style="overflow-x: auto; overflow-y: auto;height:320px;">

                        <table id="input-table" class="In-table" style="display: block;">

                            <tbody class="In-table" style='width:100%!important;'>

                            </tbody>

                        </table>

                    </div>

                    <div class='fanye' style="width:100%;text-align:center;">

                          <span style="display:inline-block;">每页显示<input type="text" id="PageNo" size="3" value="3" style='text-align:center;border:1px solid #ccc;'/>组</span>

                          <div id="div-button" style="display:inline-block;margin-left:5px;">

                          <input type="button" value="首页" id="F-page">

                          <input type="button" value="上一页" id="Pre-page">

                          <input type="button" value="下一页" id="Nex-page">

                          <input type="button" value="尾页" id="L-page">

                    </div>

 

                    <span style="display:inline-block;"> 当前第<span id="s2"></span>页</span>

                      <span style="display:inline-block;">总共<span id="s1"></span>页</span>

                   

                </div>

Js部分：

function getLocalTime(nS) {

    return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,20)

};

 

   function gaoyingxiangliweibo() {

        function place() {

            //this.ajax_method='GET'; // body...

        }

        place.prototype= {

            call_request:function(url,callback) {

                $.ajax({

                    url: url,

                    type: 'GET',

                    dataType: 'json',

                    async: true,

                    success:callback

                });

            },

        };

        function territory(data) {

            var data=eval(data);

            Draw_weibo_table(data);

        };

        var place=new place();

        function nums() {

            var url = ' ';

            place.call_request(url,territory);

        }

        nums();

        function Draw_weibo_table(data){

          $('#group_emotion_loading').css('display', 'none');

          $('#input-table').css('display', 'block');

          var dataArray = data;

          var PageNo=document.getElementById('PageNo');                   //设置每页显示行数

          var InTb=document.getElementById('input-table');               //表格

          var Fp=document.getElementById('F-page');                      //首页

          var Nep=document.getElementById('Nex-page');                  //下一页

          var Prp=document.getElementById('Pre-page');                  //上一页

          var Lp=document.getElementById('L-page');                     //尾页

          var S1=document.getElementById('s1');                         //总页数

          var S2=document.getElementById('s2');                         //当前页数

          var currentPage;                                              //定义变量表示当前页数

          var SumPage;     

 

              if(PageNo.value!="")                                       //判断每页显示是否为空

              {

                  InTb.innerHTML='';                                     //每次进来都清空表格

                  S2.innerHTML='';                                        //每次进来清空当前页数

                  currentPage=1;                                          //首页为1

                  S2.appendChild(document.createTextNode(currentPage));

                  S1.innerHTML='';                                        //每次进来清空总页数

                  if(dataArray.length%PageNo.value==0)                    //判断总的页数

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value);

                  }

                  else

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value)+1

                  }

                  S1.appendChild(document.createTextNode(SumPage));

                  var oTBody=document.createElement('tbody');               //创建tbody

                  oTBody.setAttribute('class','In-table');                   //定义class

                  InTb.appendChild(oTBody);

                  //将创建的tbody添加入table

                  var html_c = '';

                  if(dataArray==''){

                    html_c = "<div style='width:100%;'><span><img src='/static/img/pencil-icon.png' style='height:12px;width:12px;margin:0px;margin-right:8px;float:left;'>用户未发布任何微博</span></div>";

                      oTBody.innerHTML = html_c;

                }else{

            

                  for(i=0;i<parseInt(PageNo.value);i++)

                  {                                                          //循环打印数组值

                      oTBody.insertRow(i);

                    var name;

                    if (dataArray[i].uname==''||dataArray[i].uname=='unknown') {

                        name=dataArray[i].uid;

                    }else {

                        name=dataArray[i].uname;

                    };

                      html_c = '<div class="twr1">'+

'                        <p class="master">'+

'                            微博内容：'+

'                            <span class="master1">'+

                        dataArray[i].text+

'                            </span>'+

'                        </p>'+

'                        <p class="time">'+

'                            <span class="time1">来自微博用户：</span>  '+

'                            <a class="time2">'+name+'</a>    '+

'                            <span class="time3">发表于  <i>'+

                            getLocalTime(dataArray[i].timestamp)+'</i></span>'+

'                            <span class="time4" style="display: inline-block;margin-left: 30%">转发数（'+dataArray[i].retweeted+'）</span>| '+

'                            <span class="time5">评论数（'+dataArray[i].comment+'）</span>| '+

'                            <span class="time6">言论敏感度（'+dataArray[i].sensitive+'）</span>'+

'                        </p>'+

'                    </div>';

                         oTBody.rows[i].insertCell(0);

                         oTBody.rows[i].cells[0].innerHTML = html_c;                    

                  }

              }

          }

           Fp.οnclick=function()

          {

 

              if(PageNo.value!="")                                       //判断每页显示是否为空

              {

                  InTb.innerHTML='';                                     //每次进来都清空表格

                  S2.innerHTML='';                                        //每次进来清空当前页数

                  currentPage=1;                                          //首页为1

                  S2.appendChild(document.createTextNode(currentPage));

                  S1.innerHTML='';                                        //每次进来清空总页数

                  if(dataArray.length%PageNo.value==0)                    //判断总的页数

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value);

                  }

                  else

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value)+1

                  }

                  S1.appendChild(document.createTextNode(SumPage));

                  var oTBody=document.createElement('tbody');               //创建tbody

                  oTBody.setAttribute('class','In-table');                   //定义class

                  InTb.appendChild(oTBody);                                     //将创建的tbody添加入table

                  var html_c = '';

 

                  if(dataArray==''){

                    html_c = "<div style='width:100%;'><span style='margin-left:20px;'>用户未发布任何微博</span></div>";

                      oTBody.rows[0].cells[0].innerHTML = html_c;

                }else{

            

                  for(i=0;i<parseInt(PageNo.value);i++)

                  {                                                          //循环打印数组值

                      oTBody.insertRow(i);

                    var name;

                    if (dataArray[i].uname==''||dataArray[i].uname=='unknown') {

                        name=dataArray[i].uid;

                    }else {

                        name=dataArray[i].uname;

                    };

                      html_c = '<div class="twr1">'+

'                        <p class="master">'+

'                            微博内容：'+

'                            <span class="master1">'+

                        dataArray[i].text+

'                            </span>'+

'                        </p>'+

'                        <p class="time">'+

'                            <span class="time1">来自微博用户：</span>  '+

'                            <a class="time2">'+name+'</a>    '+

'                            <span class="time3">发表于  <i>'+

                            getLocalTime(dataArray[i].timestamp)+'</i></span>'+

'                            <span class="time4" style="display: inline-block;margin-left: 30%">转发数（'+dataArray[i].retweeted+'）</span>| '+

'                            <span class="time5">评论数（'+dataArray[i].comment+'）</span>| '+

'                            <span class="time6">言论敏感度（'+dataArray[i].sensitive+'）</span>'+

'                        </p>'+

'                    </div>';

                         oTBody.rows[i].insertCell(0);

                         oTBody.rows[i].cells[0].innerHTML = html_c;                    

                  }

              }

          }

          }

          Nep.οnclick=function()

          {

              if(currentPage<SumPage)                                 //判断当前页数小于总页数

              {

                  InTb.innerHTML='';

                  S1.innerHTML='';

                  if(dataArray.length%PageNo.value==0)

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value);

                  }

                  else

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value)+1

                  }

                  S1.appendChild(document.createTextNode(SumPage));

                  S2.innerHTML='';

                  currentPage=currentPage+1;

                  S2.appendChild(document.createTextNode(currentPage));

                  var oTBody=document.createElement('tbody');

                  oTBody.setAttribute('class','In-table');

                  InTb.appendChild(oTBody);

                  var a;                                                 //定义变量a

                  a=PageNo.value*(currentPage-1);                       //a等于每页显示的行数乘以上一页数

                  var c;                                                  //定义变量c

                  if(dataArray.length-a>=PageNo.value)                  //判断下一页数组数据是否小于每页显示行数

                  {

                      c=PageNo.value;

                  }

                  else

                  {

                      c=dataArray.length-a;

                  }

                  for(i=0;i<c;i++)

                  {

                         oTBody.insertRow(i);

                         var name;

                    if (dataArray[i+a].uname==''||dataArray[i+a].uname=='unknown') {

                        name=dataArray[i+a].uid;

                    }else {

                        name=dataArray[i+a].uname;

                    };

                          oTBody.rows[i].insertCell(0);

                        html_c = '<div class="twr1">'+

'                        <p class="master">'+

'                            微博内容：'+

'                            <span class="master1">'+

                        dataArray[i+a].text+

'                            </span>'+

'                        </p>'+

'                        <p class="time">'+

'                            <span class="time1">来自微博用户：</span>  '+

'                            <a class="time2">'+name+'</a>    '+

'                            <span class="time3">发表于  <i>'+

                            getLocalTime(dataArray[i+a].timestamp)+'</i></span>'+

'                            <span class="time4" style="display: inline-block;margin-left: 30%">转发数（'+dataArray[i+a].retweeted+'）</span>| '+

'                            <span class="time5">评论数（'+dataArray[i+a].comment+'）</span>| '+

'                            <span class="time6">言论敏感度（'+dataArray[i+a].sensitive+'）</span>'+

'                        </p>'+

'                    </div>';

                        oTBody.rows[i].cells[0].innerHTML = html_c;                      

                                                                         //数组从第i+a开始取值

                  }

              }

          }

 

          Prp.οnclick=function()

          {

              if(currentPage>1)                        //判断当前是否在第一页

              {

                  InTb.innerHTML='';

                  S1.innerHTML='';

                  if(dataArray.length%PageNo.value==0)

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value);

                  }

                  else

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value)+1

                  }

                  S1.appendChild(document.createTextNode(SumPage));

                  S2.innerHTML='';

                  currentPage=currentPage-1;

                  S2.appendChild(document.createTextNode(currentPage));

                  var oTBody=document.createElement('tbody');

                  oTBody.setAttribute('class','In-table');

                  InTb.appendChild(oTBody);

                  var a;

                  a=PageNo.value*(currentPage-1);

                  for(i=0;i<parseInt(PageNo.value);i++)

                  {

                      oTBody.insertRow(i);

                      var name;

                    if (dataArray[i+a].uname==''||dataArray[i].uname=='unknown') {

                        name=dataArray[i+a].uid;

                    }else {

                        name=dataArray[i+a].uname;

                    };

                      oTBody.rows[i].insertCell(0);

                      html_c = '<div class="twr1">'+

'                        <p class="master">'+

'                            微博内容：'+

'                            <span class="master1">'+

                        dataArray[i+a].text+

'                            </span>'+

'                        </p>'+

'                        <p class="time">'+

'                            <span class="time1">来自微博用户：</span>  '+

'                            <a class="time2">'+name+'</a>    '+

'                            <span class="time3">发表于  <i>'+

                            getLocalTime(dataArray[i+a].timestamp)+'</i></span>'+

'                            <span class="time4" style="display: inline-block;margin-left: 30%">转发数（'+dataArray[i+a].retweeted+'）</span>| '+

'                            <span class="time5">评论数（'+dataArray[i+a].comment+'）</span>| '+

'                            <span class="time6">言论敏感度（'+dataArray[i+a].sensitive+'）</span>'+

'                        </p>'+

'                    </div>';

                        oTBody.rows[i].cells[0].innerHTML = html_c;

                  }

              }

          }

 

           Lp.οnclick=function()

          {

                  InTb.innerHTML='';

                  S1.innerHTML='';

                  if(dataArray.length%PageNo.value==0)

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value);

                  }

                  else

                  {

                      SumPage=parseInt(dataArray.length/PageNo.value)+1

                  }

                  S1.appendChild(document.createTextNode(SumPage));

                  S2.innerHTML='';

                  currentPage=SumPage;

                  S2.appendChild(document.createTextNode(currentPage));

                  var oTBody=document.createElement('tbody');

                  oTBody.setAttribute('class','In-table');

                  InTb.appendChild(oTBody);

                  var a;

                  a=PageNo.value*(currentPage-1);

                  var c;

                  if(dataArray.length-a>=PageNo.value)

                  {

                      c=PageNo.value;

                  }

                  else

                  {

                      c=dataArray.length-a;

                  }

                  for(i=0;i<c;i++)

                  {

                      oTBody.insertRow(i);

                      var name;

                    if (dataArray[i+a].uname==''||dataArray[i+a].uname=='unknown') {

                        name=dataArray[i+a].uid;

                    }else {

                        name=dataArray[i+a].uname;

                    };

                        oTBody.rows[i].insertCell(0);

                      html_c = '<div class="twr1">'+

'                        <p class="master">'+

'                            微博内容：'+

'                            <span class="master1">'+

                        dataArray[i+a].text+

'                            </span>'+

'                        </p>'+

'                        <p class="time">'+

'                            <span class="time1">来自微博用户：</span>  '+

'                            <a class="time2">'+name+'</a>    '+

'                            <span class="time3">发表于  <i>'+

                            getLocalTime(dataArray[i+a].timestamp)+'</i></span>'+

'                            <span class="time4" style="display: inline-block;margin-left: 30%">转发数（'+dataArray[i+a].retweeted+'）</span>| '+

'                            <span class="time5">评论数（'+dataArray[i+a].comment+'）</span>| '+

'                            <span class="time6">言论敏感度（'+dataArray[i+a].sensitive+'）</span>'+

'                        </p>'+

'                    </div>';

                        oTBody.rows[i].cells[0].innerHTML = html_c;

                  }

          }

 

        }

    };

gaoyingxiangliweibo();


还有很多类似的框架，大家可以参考①  http://blog.csdn.net/springfileld/article/details/39004459

②http://jingpin.jikexueyuan.com/article/29434.html

being_0008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现翻书特效
越陌度阡
08-11 3568
给大家分享一个用原生JS与CSS 3.0实现的翻书效果图，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生JS与CSS 3.0实现翻书特效</title>.........
手写简单分页js
weixin_41609327的博客
02-27 890
1，功能 自动序列化class=query的的div的控件； 根据每个项目只需要重写createFootHtml就可以，配合asp.net的模板页来渲染数据。 //Refuse to be modified by anynone 拒绝任何人修改 //author 11973 作者11973 //if you want to use,but it can't...
部分JS原生方法手写
weixin_60901888的博客
02-05 628
部分JS原生方法手写 Array let arr = [{ name: '科比', num: 24 }, { name: '詹姆斯', num: 23 }, { name: '保罗', num: 3 }, { name: '威少', num: 1 } ] forEach 对数组每一项元素进行操作，改变原数组 Array.pr
原生JS实现翻页
忙着开花儿
03-23 2456
话不多说，直接上代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
js翻页功能
03-07
js翻页功能 漂亮的翻页功能实现 简单易用 呵呵
原生JS实现图片翻书效果
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个图片翻书效果。这个效果通常用于创建交互式的电子书或展示册，让用户体验到类似实体书翻页的动态视觉效果。通过以下步骤，我们可以理解并实现这样的功能： 1. *...
使用原生JS实现滚轮翻页效果的示例代码
10-15
主要介绍了使用原生JS实现滚轮翻页效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
原生js实现可拖拽效果
10-20
本文主要介绍了原生js实现可拖拽效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
原生js手写tree树形分类选择插件
05-06
"原生js手写tree树形分类选择插件"就是一个这样的例子，它允许用户通过树状结构来展示和操作数据，比如进行分类选择。这个插件利用了JavaScript的灵活性，结合jQuery库以增强DOM操作和事件处理，提供了高效且易于...
HTML5 翻书效果，已经改好
04-17
HTML5 翻书效果，已经改好。已经测试通过 非常好用
filpbook HTML5 翻书效果
04-20
HTML5 翻书效果.JS...喜欢的朋友可以下载学习.
原生js分页效果
front_end_fan
08-10 2572
2017年4月份，我去无锡某软件公司面试，项目经理当时问到一个问题：怎么实现分页效果，说明实现的原理？当时觉得分页是个极其复杂的技术难点，也没回答的很完整。现总结原生js实现分页效果与此，并附上详细注释：总结：分页必须要搞清楚几个参数： 1、一共几条数据 2、每页显示几条数据（x） 3、一共几页 难点：点击第n页时，显示哪几条数据(n-1)*x+1～n*x条数据（n>=1）代码如下:<
【翻页计时器动画】手摸手写一个时间翻页计时器animation动画，基于js、css、vue
SHiny_Jun的博客
09-06 1119
项目需要写了一个翻页的计时器，项目基于vue，里面内容涉及组件知识，样式如下图： 本组件分成两个组件，一个是单独的一个反转的数字，另一个是把这个翻页组成一个计时器。 先分析单独翻转的数据动画：（先抛代码） countTurn.vue <template> <div id="stage-1" class="stage stage-state-default"&...
原生JavaScript实现前端翻页插件
小冷_Blog
02-04 1446
之前做项目有遇到需要使用翻页插件，公司原来使用的是基于jQuery和bootstrap扩展的插件，依赖较多，后来自己就尝试着用原生的JS实现插件效果，由于技术水平有限，花了一天多时间算是完工，但可能还有一些BUG本人未完全测试出，一些代码逻辑也有待改进，望谅解。配置与使用说明：&lt;div id="pageDom"&gt;&lt;/div&gt; var pageDom = document....
原生js封装分页器(繁琐版)
想想挺好啊
08-05 915
html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页器</title> <style type="text/css"> * { margin: 0; padding: 0; } ul ...
仅用原生JavaScript手写DOM事件模型
GAMELOFT9----纸上得来终觉浅，绝知此事要躬行
04-29 8622
前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记，主要讲作者的前端面试经历，其中提到了面试官会考察手写一个简单的DOM事件模型。 “如果上述都ok的话，那么极有可能要求让你【实现事件模型】，即写一个类或是一个模块，有两个函数，一个bind一个trigger，分别实现绑定事件和触发事件，核心需求就是可以对某一个事件名称绑定多个事件响应函数，然后触发这个事件名称时，依次按绑定顺
假分页的前端实现（html+bootstrap+js）
HYeeee的博客
04-28 3507
一、开始 今天弄了一天的分页，总结一下今天的工作。 找了一下真假分页的区别： 所谓的“真分页”与“假分页”，前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。 而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。 “真分页”显然是效率更高，面对庞大的数据量也能够从...
原生js实现带运动的分页效果
Della_UI的博客
12-08 1944
本例最终效果如下图，当切换页码时，本页码内所有课程将从最后一个课程开始依次运动到底部中间的位置并消失，然后新页码内的课程依次从底部中间的位置运动到原始位置。 首先实现分页效果，然后将运动和分页结合。 分页效果图如下图中的③或④所示： 下面将以 什么情况出现首页-什么情况出现上一页-五个页码不同排布情况-什么情况出现下一页-什么情况出现尾页-总页码提示-点击页码进行切换 的思路实现该分页效果。<
【面试】手写原生js实现事件代理，并兼容浏览器
Linda的前端开发路
08-13 798
【面试】手写原生js实现事件代理，并兼容浏览器
无缝轮播_原生JS手写无缝无限轮播 carousel
最新发布
06-06
好的，关于无缝轮播，可以通过原生JS手写实现。下面是一个简单的无缝无限轮播的carousel实现，你可以参考一下： HTML部分： ```html <li><img src="img1.jpg"> <li><img src="img2.jpg"> <li><img src="img3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值