<!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. vue-cli 3.x 开发插件并发布到 npm

    为了摆脱咸鱼的身份,我给自己定了一个开源项目的目标 于是抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题 之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的 ...

  2. 前端入门4-CSS属性样式表

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  3. 无需ORM的数据库

    DynamicDB是一种NoSQL数据库.一个实例下可以创建多种Database,一个Database中可以包含多个Collection(相当于关系型数据库中的Table),一个Collection中 ...

  4. 唯一索引的一种使用情景【有则U无则I】

    这个知识点是最近一位面试老师问我的,当时对这种方法不了解,所以只能说那个中效率低的方法了,也就是先进性select判断,然后在执行更新或者插入操作,显然这种是很麻烦的,也自我反思一下,确实有很多的知识 ...

  5. Android gravity和layout_gravity的区别

    一.gravity和layout_gravity相同处 两者都是设置对齐方式的属性.内部的属性值相同. 根据英文意思也能理解其中的意思.如center_horizontal表示在水平方向上的位置为中间 ...

  6. Android dp、dip、dpi、px、sp简介及相关换算，及其应用实例

    屏幕分辨率:在x y轴上的像素点数.单位是px,1px=1个像素点.一般以    纵向像素×横向像素    表示,如1920*1080dpi--------------------------每英寸上 ...

  7. centos7安装配置redis

    1.下载redis > cd /usr/local/src #文件下载目录 > curl -O http://download.redis.io/releases/redis-3.2.8. ...

  8. 关于一体机外卖单不打印外卖单号FAQ(适用正餐6.0.09，轻餐4.0.6.1，轻餐4.0.6.2)

    适用情景:升级版本后打印机打印出的外卖小票不出现外卖单号. 解决方案:设置-功能设置-小票设置-小票自定义-前台小票-外卖订单-------选择编辑,选中右侧中外卖单号或者外卖订单编号,点击保存即可. ...

  9. TURN Server Windows 安装程序

    有了OfficeSIP TURN Server 安装包,记录一下. http://www.onlinedown.net/soft/94746.htm 开源代码(C#)和应用地址:https://sou ...

  10. 解决Spark filter过滤条件中使用>=或<=时不识别的问题

    一.场景 val jldxx_zxzq = jldxx_with_dddf .withColumn("ZXZQ", zxzq(col("CBZQ"))) .fi ...