话不多少，直接上代码

html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript分页效果</title>

    <style>

        a{margin-right:5px;}

    </style>

</head>

<body>

    <div id="div1">

    </div>

    <script src="js/myPage.js"></script>

</body>

</html>

javascript代码：

window.onload = function() {

    var page = new Page({

        'id': 'div1',

        'allNum': ,

        'showNum': ,

        'nowNum': ,

        'callback':function(nowIndex,allIndex){

            alert('当前页'+nowIndex+',总页数'+allIndex);

        }

    });

    page.init();

}

//采用面向对象的方法进行封装

function Page(opt) {

    if (!opt) {

        return;

    }

    this.id = opt.id;

    this.oParent = document.getElementById(this.id);

    //一共有多少页

    this.allNum = opt.allNum || ;

    //显示多少个分页

    this.showNum = opt.showNum || ;

    //当前选择的页面

    this.nowNum = opt.nowNum || ;

    this.callback=opt.callback||function(){};

}

Page.prototype = {

    constructor: Page,

    init: function() {

        var that = this;

        this.change();

    },

    change: function(curNum) {

        this.nowNum = curNum;

        //为了提高性能，可以移除原来所有链接的事件处理程序

        var aAs = this.oParent.getElementsByTagName('a');

        for (var i = ; i < aAs.length; i++) {

            aAs[i].onclick = null;

        }

        this.oParent.innerHTML = '';

        var tmp = Math.floor(this.showNum / );

        //处理首页，当nowNum>tmp+1,并且allNum>showNum时显示

        if (this.nowNum > tmp +  && this.allNum > this.showNum) {

            this.appendLink('#1', '首页');

        }

        //处理上一页，只要当前选择页不是首页，就呈现

        if (this.nowNum > ) {

            this.appendLink('#' + (this.nowNum - ), '上一页');

        }

        //处理中间页码

        //如果总页码小于显示页码数，从1开始以此显示

        if (this.allNum <= this.showNum) {

            this.appendPageLinks(, this.allNum);

        } else {

            //如果选择的是第1页到第tmp页，显示前面showNumge

            if (this.nowNum <= tmp) {

                this.appendPageLinks(, this.showNum);

            }

            //如果选择是第this.allNum-tmp,显示最后showNum个

            else if (this.nowNum >= this.allNum - tmp) {

                this.appendPageLinks(this.allNum - this.showNum + , this.allNum);

            }

            //其他情况，则以this.nowNum为中心，显示this.showNum个

            else {

                this.appendPageLinks(this.nowNum - tmp, this.nowNum + tmp);

            }

        }

        //处理下一页，只要当前选择的不是最后一页，就显示下一页

        if (this.nowNum < this.allNum) {

            this.appendLink('#' + (this.nowNum + ), '下一页');

        }

        //处理最后一页，当nowNum<this.allNum-tmp,并且allNum>showNum时候显示

        if (this.nowNum < this.allNum - tmp & this.allNum > this.showNum) {

            this.appendLink('#' + this.allNum, '尾页');

        }

        //添加事件处理程序

        var that = this;

        var aAs = this.oParent.getElementsByTagName('a');

        for (var i = ; i < aAs.length; i++) {

            aAs[i].onclick = function() {

                var index = parseInt(this.getAttribute('href').substring());

                that.change(index);

                that.callback(that.nowNum,that.allNum);

                return false;

            }

        }

    },

    appendLink: function(href, innerHtml) {

        var oA = document.createElement('a');

        oA.href = href;

        oA.innerHTML = innerHtml;

        this.oParent.appendChild(oA);

    },

    appendPageLink: function(pageNum) {

        if (pageNum === this.nowNum) {

            this.appendLink('#' + pageNum, pageNum);

        } else {

            this.appendLink('#' + pageNum, '[' + pageNum + ']');

        }

    },

    appendPageLinks: function(startPageNum, endPageNum) {

        for (var i = startPageNum; i <= endPageNum; i++) {

            this.appendPageLink(i);

        }

    }

}

javascript实例学习之四——javascript分页的更多相关文章

  1. JavaScript权威设计--JavaScript函数(简要学习笔记十一)

    1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...

  2. JavaScript权威设计--JavaScript函数(简要学习笔记十)

    1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...

  3. javascript笔记：javascript的关键所在---作用域链

    javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript技巧也是围绕作用域进行的,今天我要总结一下关于 ...

  4. JavaScript强化教程——JavaScript 总结

    本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. Javascript学习2 - Javascript中的表达式和运算符

    原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符, ...

  7. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  8. 第一百二十九节，JavaScript，理解JavaScript库

    JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...

  9. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. Windows系统中Git的安装配置

    一.Git安装 1.下载 Git官网:https://git-scm.com/download/ 选择windows版本下载即可. 百度软件中心:http://rj.baidu.com/ 如官网下载不 ...

  2. Maven问题总结：could not resolve archetype xxxxxxx from any of the configured repositories

    错误提示 Eclipse中通过Archetype创建Maven项目时报错:Could not resolve archetype xxxxxxx from any of the configured ...

  3. 2016.04.27,英语,《Vocabulary Builder》Unit 19

    bio, comes from the Greek word for 'life'. biosphere ['baɪoʊsfɪr] n. 生物圈: biology [baɪ'ɑːlədʒi] n. 生 ...

  4. Web交互设计优化的简易check list

    Web交互设计优化的简易check list 00 | 时间: 2011-02-11 | 28,842 Views 交互设计, 用户研究   “优化已有产品的体验”,这是用户体验相关岗位职责中常见的描 ...

  5. 尝试使用word发布博客

    尝试使用WORD2010发布博客   使用博客园博客的主要原因在于能够使用live writer,不用每次都打开网页,当然博客园的大牛很多   如果可以使用方法word,当让更爽,格式的问题将不再是问 ...

  6. CSS Questions:Front-end Developer Interview Questions

    Describe what a "reset" CSS file does and how it's useful. What Is A CSS Reset? A CSS Rese ...

  7. Android Gradle 编译错误Java finished with non-zero exit value 2

    出现这个错误主要有两类错误 依赖包重复 方法数超过65K 针对第一种错误,可能是由于build.gradle里写了 compile fileTree(dir: 'libs', include: ['* ...

  8. ubuntu 64bit arm-linux-gcc: No such file or directory 解决

    通过下面这个解决 ubuntu 64bit  arm-linux-gcc: No such file or directory 安装 sudo apt-get install lsb-core解决 h ...

  9. 蓝牙的HFP协议笔记

    1.概述     HFP(Hands-free Profile),可以让蓝牙设备可以控制电话,如接听.挂断.拒接.语音拨号等,拒接.语音拨号要视蓝牙耳机及电话是否支持. HFP定义了音频网关(AG)和 ...

  10. AQS 与 LockSupport

    1.结构 Lock的实现类其实都是构建在AbstractQueuedSynchronizer上,每个Lock实现类都持有自己内部类Sync的实例 二.二元信号量 A semaphore initial ...