<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-Type" content="text/html;charset=utf-8">

        <title>网页特效 静态代码的分页效果 </title>

        <style type="text/css">

            li{display:none}

        </style>

    </head>

<body>

    <ul id="box">

        <li>静态网页分页效果01页</li>

        <li>静态网页分页效果02页</li>

        <li>静态网页分页效果03页</li>

        <li>静态网页分页效果04页</li>

        <li>静态网页分页效果05页</li>

        <li>静态网页分页效果06页</li>

        <li>静态网页分页效果07页</li>

        <li>静态网页分页效果08页</li>

        <li>静态网页分页效果09页</li>

        <li>静态网页分页效果10页</li>

        <li>静态网页分页效果11页</li>

        <li>静态网页分页效果12页</li>

        <li>静态网页分页效果13页</li>

        <li>静态网页分页效果14页</li>

        <li>静态网页分页效果15页</li>

        <li>静态网页分页效果16页</li>

        <li>静态网页分页效果17页</li>

        <li>静态网页分页效果18页</li>

        <li>静态网页分页效果19页</li>

        <li>静态网页分页效果20页</li>

    </ul>

    <div id="page"></div>

    <script language="javascript">

        var obj,j;

        var page = 0;

        var currentPage = 0;//当前页

        var listNum = 2;//每页显示<ul>数

        var PagesLen;//总页数

        var PageNum = 4;//分页链接接数(5个)

        window.onload = function(){

            obj = document.getElementById("box").getElementsByTagName("li");

            j = obj.length//li的个数

            PagesLen = Math.ceil(j / listNum);//总页数

            upPage(0)

        }

        function upPage(p){

            currentPage = p

            //内容变换

            for (var i = 0; i < j; i++){

                obj[i].style.display="none"

            }

            for (var i = p * listNum; i < (p+1) * listNum; i++){

                if(obj[i])obj[i].style.display = "block";

                console.log(i);

            }

            //分页链接变换

            var strS = '<a href="###" onclick="upPage(0)">首页</a>  ';//首页

            var PageNum_2 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2)+1 : Math.ceil(PageNum / 2);

            var PageNum_3 = PageNum % 2 == 0 ? Math.ceil(PageNum / 2) : Math.ceil(PageNum / 2) + 1;

            console.log(PageNum_2,PageNum_3);

            var strC = "",startPage,endPage;

            if (PageNum >= PagesLen) {

                startPage = 0;

                endPage = PagesLen - 1;

            }else if (currentPage < PageNum_2){

                startPage = 0;

                endPage = PagesLen - 1 > PageNum ? PageNum : PagesLen - 1;

            }else {

                startPage=(currentPage+PageNum_3 >= PagesLen) ? PagesLen-PageNum - 1 : currentPage-PageNum_2 + 1;

                var t = startPage + PageNum;

                endPage =(t > PagesLen) ? PagesLen - 1 : t;

            }

            console.log(startPage,endPage);

            for (var i = startPage;i <= endPage; i++){

                 if (i == currentPage)strC += '<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '

                 else strC += '<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '

            }

            var strE = ' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a>  ';//尾页

            var strE2 = currentPage + 1 + "/" + PagesLen + "页" + "  共" + j + "条" ;//共*条

            document.getElementById("page").innerHTML = strS + strC + strE + strE2;

        }

    </script>

</body>

</html>

【js】使用javascript 实现静态网页分页效果的更多相关文章

  1. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  2. JavaScript实现的网页放大镜效果

    今天在观看视频学习的时候,学到了一个小技巧.就拿过来与大家进行分享一下啦. 实现的原理 分析需求:需要两张图,一大一小.然后根据鼠标的动作显示出不同的区域块的图像. 核心:鼠标事件的获取和处理.图片显 ...

  3. javascript 利用数组制作分页效果

    代码 参数: pageSize:一页的总数 currentPage:当前的页数 skipNum:跳过的数量 arr:数组 返回值: newArr分页后的数组 var pagination = func ...

  4. 静态页分页功能js代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  6. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  7. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  8. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  9. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

随机推荐

  1. 推荐好用的JavaScript模块

    译者按: 作者将自己常用的JavaScript模块分享给大家. 原文:

  2. select2 插件加载后端数据

    //html <select class="form-group form-control" name="roomId" id="roomLis ...

  3. Mysql 常用数据类型

    double:浮点型,double(5,2) 表示最多5位,必须包含两位小数,最大值是 999.99 char:定长字符串类型,char(10) 表示必须放 10 的字节,没有就用空格补充 varch ...

  4. Android调用系统图库返回路径

    调用系统图库: Intent intent = new Intent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI); ...

  5. 【LeetCode】两数相加

    题目描述 给出两个非空的链表用来表示两个非负的整数.其中,它们各自的位数是按照逆序的方式存储的,并且它们的每个节点只能存储一位数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和. ...

  6. 复杂的web---web中B/S网络架构

    web中B/S网络架构 1:web中B/S网络架构 2:CDN工作机制和架构 3:负载均衡:    B/S分别是浏览器/服务器,架构流程为:     当你访问网站的时候,浏览器发送各种请求给浏览器,服 ...

  7. Pycharm基本设置和插件安装

    Pycharm调节主题和字体 调节主题:File - Setting - Editor - Color Scheme - 选择个人喜欢的风格 调节字体大小,感觉默认字体有点小,对我这样的老人家,至少要 ...

  8. 关于最新笔记本机型预装win8如何更换为win7的解决办法

    关于最新笔记本机型预装win8如何更换为win7的解决办法 目前新出的很多机型出厂自带的都是win8系统,可能有些人用不习惯,想更换为win7系统,但是由于这些机型主板都采用UEFI这种接口(硬盘分区 ...

  9. 使用nginx代理后以及配置https后，如何获取真实的ip地址

    使用nginx代理后以及配置https后,如何获取真实的ip地址 Date:2018-8-27 14:15:51 使用nginx, apache等反向代理后,如果想获取请求的真实ip,要在nginx中 ...

  10. Hive内部表与外部表的区别

    1.未被external修饰的是内部表[managed table],被external修饰的为外部表[external table]. 2.内部表数据由Hive自身管理,外部表数据由HDFS管理. ...