<!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. @RequestBody Spring MVC 示例

    1.前端的访问请求 <script type="text/javascript"> $(document).ready(function(){ var saveData ...

  2. JS无法获取display为none的隐藏元素的宽度和高度的解决方案

    在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素. 可使用jQuery Actual Plugin插件来完成,其源码如下: ;( function ( ...

  3. JS检测浏览器Adobe Reader插件

    Web应用中当我们希望向用户显示pdf文档时候,如果用户安装了Adobe Reader之类的pdf阅读器,就可以直接打开文档在浏览器中显示, 但是,当用户没有安装这类软件的时候,自然是打不开的,为了系 ...

  4. CSS选择器：子选择符号

    <html> <head> <style type="text/css"> .class>h2{color:red} </style ...

  5. Android项目实战（三十三）：AS下获取获取依赖三方的jar文件、aar 转 jar

    使用 Android studio 开发项目中,有几种引用三方代码的方式:jar 包 ,类库 ,gradle.build 的compile依赖. 大家会发现github上不少的项目只提供compile ...

  6. django rest framework 与 Vue 整合遇到的坑

    前提是已经有了Django项目与前端Vue打包好的dist文件 好,开始整合!!! 当然还是先设置Django的setting.py 1设置模板路径 2 设置静态文件路径 TEMPLATES = [ ...

  7. 使用Java实现简单的局域网设备扫描

    在产品的使用中我们一般都要设置一个配置环节,这个环节可以设定主机的IP地址等信息,但是这样配置的话使得我们的产品用起来效果不是很好,因此我想到了实现局域网IP扫描的功能,IP局域网扫描是指定IP网段获 ...

  8. springboot 学习之路 1（简单入门）

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

  9. mssql sqlserver 使用脚本输出excel文件的方法分享

    转自:http://www.maomao365.com/?p=6683 摘要: 下文将分享使用sql脚本输出excel的方法 此脚本可以应用于 表或视图生成excel的方法,若需使用sql脚本输出ex ...

  10. 前后端分离djangorestframework——限流频率组件

    频率限制 什么是频率限制 目前我们开发的都是API接口,且是开房的API接口.传给前端来处理的,也就是说,只要有人拿到这个接口,任何人都可以通过这个API接口获取数据,那么像网络爬虫的,请求速度又快, ...