<!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. 谈谈你对 Java 平台的理解

    声明 本篇所涉及的提问,正文的知识点,全都来自于杨晓峰的<Java核心技术36讲>,当然,我并不会全文照搬过来,毕竟这是付费的课程,应该会涉及到侵权之类的问题. 所以,本篇正文中的知识点, ...

  2. Java 导出 Excel 列号数字与字母互相转换工具

    package test; /** * Deal with Excel column indexToStr and strToIndex * @author * @version 2015-7-8 * ...

  3. 51nod1238 最小公倍数之和 V3(莫比乌斯反演)

    题意 题目链接 Sol 不想打公式了,最后就是求一个 \(\sum_{i=1}^n ig(\frac{N}{i})\) \(g(i) = \sum_{i=1}^n \phi(i) i^2\) 拉个\( ...

  4. JAVA TestNG单元测试详解

    TestNG单元测试详解   by:授客 QQ:1033553122 1. 测试环境 2 2. 介绍 2 3. Annotation 2 4. testng.xml 3 4.1. 例1 3 4.2. ...

  5. (办公)Spring boot(系列)的返回json封装类

    package com.imooc.util; import com.fasterxml.jackson.databind.ObjectMapper; /** * 自定义响应数据结构: * 这个类是提 ...

  6. 企业建立成功 DevOps 模式所需应对的5个挑战

    [编者按]本文作者为 Kevin Goldberg,主要介绍要想成功部署 DevOps 模式,企业所需应对的5大挑战与问题.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 要给 DevOps ...

  7. Redis常用命令【字符串】

    1.启动Redis客户端 进入src目录下,执行:redis-cli启动Redis客户端 2.help 帮助 帮助命令,用来查看redis命令的使用方式 3.set 设置 3.1设置 3.2不存在才设 ...

  8. 剑指Offer 答题截图

  9. Sqlserver还原master

    net stop mssqlserver net start mssqlserver /m"SQLCMD" sqlcmd -s xx sqlcmd -s xx -U sa -P x ...

  10. MongoDB数据库简单操作

    之前学过的有mysql数据库,现在我们学习一种非关系型数据库 一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数 ...