<!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. POJ 2942Knights of the Round Table(tarjan求点双+二分图染色)

    Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 13954   Accepted: 4673 Description Bein ...

  2. SuperMap-iServer过滤请求返回值

    目的: iServer发布的arcgis地图服务中,由于tileinfo参数为null,导致用arcgis-ios客户端开发的APP闪退.通过过滤器将get请求的返回值修改 代码: package c ...

  3. Activity切换的时候生命周期的变化

    之前在做笔试题的时候遇到一个问题:Activity A切换到ActivityB时,A和B的生命周期变化. 事实上,它们的生命周期变化是这样的: 1.A的onPause()方法被执行. 2.B的onCr ...

  4. Android6.0 源码修改之屏蔽系统短信功能和来电功能

    一.屏蔽系统短信功能 1.屏蔽所有短信 android 4.2 短信发送流程分析可参考这篇 戳这 源码位置 vendor\mediatek\proprietary\packages\apps\Mms\ ...

  5. SQL 中事务的分类

    先讲下事务执行流程: BEGIN和COMMIT PRINT @@TRANCOUNT --@@TRANCOUNT统计事务数量 BEGIN TRAN PRINT @@TRANCOUNT BEGIN TRA ...

  6. SQL中常用系统函数

    --1 CONVERT(数据类型,表达式),CAST( 表达式 AS 数据类型) 转变数据类型--将数字转化为字符串SELECT CONVERT(varchar(2),12)+CONVERT(varc ...

  7. js实现进度条

    不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. shell编程 学好内功（一）

    shell 背景 什么是shell编程 高大上的解释,往往让人摸不住头脑.一句话概括就是:shell编程就是对一堆Linux命令的逻辑化处理. 为什么要会shell编程 举个简单的例子,我们做java ...

  9. Lua代码规范

    以下规范,是在Unity中使用Lua做为开发语言,仅供参考. 1.格式规范 1. lua文件名统一小写,中间一律不加下划线分割 2. 类名首字母大写,多个词组成的类名,每个词的首字母大写,中间一律不加 ...

  10. 【转载】Python中的垃圾回收机制

    GC作为现代编程语言的自动内存管理机制,专注于两件事:1. 找到内存中无用的垃圾资源 2. 清除这些垃圾并把内存让出来给其他对象使用.GC彻底把程序员从资源管理的重担中解放出来,让他们有更多的时间放在 ...