首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js脚本分页代码分享（7种样式）

Posted in Javascript onAugust 19, 2015

本文跟大家分享了7种JS脚本分页样式，相信总有一款是适合你的哦

抓紧先上图给大家挑选一下------------------运行效果-------------------

js脚本分页代码分享（7种样式）

其实小编挺喜欢最后一款的，亲，你呐？

为大家再分享实现JS脚本分页的代码，直接复制代码，运行即可，抓紧试试吧

<html>
<head>

<title>7种JS脚本分页代码</title>
<style>
body {font-size: 12px;}

/* Pages Main Tyle */
.pages {
 color: #000000;
 cursor: default;
 font-size: 10px;
 font-family: Tahoma, Verdana;
 padding: 3px 0px 3px 0px;
}
.pages .count, .pages .number, .pages .arrow {
 color: #000000;
 font-size: 10px;
 background-color: #F7F7F7;
 border: 1px solid #CCCCCC;
}
/* Page and PageCount Style */
.pages .count {
 font-weight: bold;
 border-right: none;
 padding: 2px 10px 1px 10px;
}
/* Mode 0,1,2 Style (Number) */
.pages .number {
 font-weight: normal;
 padding: 2px 10px 1px 10px;
}
.pages .number a, .pages .number span {
 font-size: 10px;
}
.pages .number span {
 color: #999999;
 margin: 0px 3px 0px 3px;
}
.pages .number a {
 color: #000000;
 text-decoration: none;
}
.pages .number a:hover {
 color: #0000ff;
}
/* Mode 3 Style (Arrow) */
.pages .arrow {
 font-weight: normal;
 padding: 0px 5px 0px 5px;
}
.pages .arrow a, .pages .arrow span {
 font-size: 10px;
 font-family: Webdings;
}
.pages .arrow span {
 color: #999999;
 margin: 0px 5px 0px 5px;
}
.pages .arrow a {
 color: #000000;
 text-decoration: none;
}
.pages .arrow a:hover {
 color: #0000ff;
}
/* Mode 4 Style (Select) */
.pages select, .pages input {
 color: #000000;
 font-size: 10px;
 font-family: Tahoma, Verdana;
}
/* Mode 5 Style (Input) */
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
 color: #666666;
 font-weight: bold;
 background-color: #F7F7F7;
 border: 1px solid #CCCCCC;
}
.pages .input input.ititle {
 width: 70px;
 text-align: right;
 border-right: none;
}
.pages .input input.itext {
 width: 25px;
 color: #000000;
 text-align: right;
 border-left: none;
 border-right: none;
}
.pages .input input.icount {
 width: 35px;
 text-align: left;
 border-left: none;
}
.pages .input input.ibutton {
 height: 17px;
 color: #FFFFFF;
 font-weight: bold;
 font-family: Verdana;
 background-color: #999999;
 border: 1px solid #666666;
 padding: 0px 0px 2px 1px;
 margin-left: 2px;
 cursor: hand;
}
</style>
<script language="JavaScript">
<!--


function showPages(name) { //初始化属性
 this.name = name;  //对象名称
 this.page = 1;   //当前页数
 this.pageCount = 1; //总页数
 this.argName = 'page'; //参数名
 this.showTimes = 1; //打印次数
}

showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
 var args = location.search;
 var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
 var chk = args.match(reg);
 this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
 if (isNaN(parseInt(this.page))) this.page = 1;
 if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
 if (this.page < 1) this.page = 1;
 if (this.pageCount < 1) this.pageCount = 1;
 if (this.page > this.pageCount) this.page = this.pageCount;
 this.page = parseInt(this.page);
 this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代码
 var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
 if (mode == '' || typeof(mode) == 'undefined') mode = 0;
 switch (mode) {
 case 0 : //模式1 (页数,首页,前页,后页,尾页)
 strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
 strHtml += '<span class="number">';
 if (prevPage < 1) {
 strHtml += '<span title="First Page">«</span>';
 strHtml += '<span title="Prev Page">‹</span>';
 } else {
 strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
 strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
 }
 for (var i = 1; i <= this.pageCount; i++) {
 if (i > 0) {
  if (i == this.page) {
  strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
  } else {
  strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
  }
 }
 }
 if (nextPage > this.pageCount) {
 strHtml += '<span title="Next Page">›</span>';
 strHtml += '<span title="Last Page">»</span>';
 } else {
 strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
 strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>';
 }
 strHtml += '</span><br />';
 break;
 case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
 strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
 strHtml += '<span class="number">';
 if (prevPage < 1) {
 strHtml += '<span title="First Page">«</span>';
 strHtml += '<span title="Prev Page">‹</span>';
 } else {
 strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
 strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
 }
 if (this.page % 10 ==0) {
 var startPage = this.page - 9;
 } else {
 var startPage = this.page - this.page % 10 + 1;
 }
 if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
 for (var i = startPage; i < startPage + 10; i++) {
 if (i > this.pageCount) break;
 if (i == this.page) {
  strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
 } else {
  strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
 }
 }
 if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
 if (nextPage > this.pageCount) {
 strHtml += '<span title="Next Page">›</span>';
 strHtml += '<span title="Last Page">»</span>';
 } else {
 strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
 strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>';
 }
 strHtml += '</span><br />';
 break;
 case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
 strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
 strHtml += '<span class="number">';
 if (prevPage < 1) {
 strHtml += '<span title="First Page">«</span>';
 strHtml += '<span title="Prev Page">‹</span>';
 } else {
 strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
 strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
 }
 if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>';
 if (this.page >= 5) strHtml += '<span>...</span>';
 if (this.pageCount > this.page + 2) {
 var endPage = this.page + 2;
 } else {
 var endPage = this.pageCount;
 }
 for (var i = this.page - 2; i <= endPage; i++) {
 if (i > 0) {
  if (i == this.page) {
  strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
  } else {
  if (i != 1 && i != this.pageCount) {
  strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
  }
  }
 }
 }
 if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>';
 if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>';
 if (nextPage > this.pageCount) {
 strHtml += '<span title="Next Page">›</span>';
 strHtml += '<span title="Last Page">»</span>';
 } else {
 strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
 strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>';
 }
 strHtml += '</span><br />';
 break;
 case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
 strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
 strHtml += '<span class="arrow">';
 if (prevPage < 1) {
 strHtml += '<span title="First Page">9</span>';
 strHtml += '<span title="Prev Page">7</span>';
 } else {
 strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>';
 strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>';
 }
 if (nextPage > this.pageCount) {
 strHtml += '<span title="Next Page">8</span>';
 strHtml += '<span title="Last Page">:</span>';
 } else {
 strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>';
 strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>';
 }
 strHtml += '</span><br />';
 break;
 case 4 : //模式4 (下拉框)
 if (this.pageCount < 1) {
 strHtml += '<select name="toPage" disabled>';
 strHtml += '<option value="0">No Pages</option>';
 } else {
 var chkSelect;
 strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
 for (var i = 1; i <= this.pageCount; i++) {
  if (this.page == i) chkSelect=' selected="selected"';
  else chkSelect='';
  strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>';
 }
 }
 strHtml += '</select>';
 break;
 case 5 : //模式5 (输入框)
 strHtml += '<span class="input">';
 if (this.pageCount < 1) {
 strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">';
 strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>';
 } else {
 strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly">';
 strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()">';
 strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly">';
 strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementById(\'pageInput' + this.showTimes + '\').value);"></option>';
 }
 strHtml += '</span>';
 break;
 default :
 strHtml = 'Javascript showPage Error: not find mode ' + mode;
 break;
 }
 return strHtml;
}
showPages.prototype.createUrl = function (page) { //生成页面跳转url
 if (isNaN(parseInt(page))) page = 1;
 if (page < 1) page = 1;
 if (page > this.pageCount) page = this.pageCount;
 var url = location.protocol + '//' + location.host + location.pathname;
 var args = location.search;
 var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
 args = args.replace(reg,'$1');
 if (args == '' || args == null) {
 args += '?' + this.argName + '=' + page;
 } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
 args += this.argName + '=' + page;
 } else {
 args += '&' + this.argName + '=' + page;
 }
 return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
 var turnTo = 1;
 if (typeof(page) == 'object') {
 turnTo = page.options[page.selectedIndex].value;
 } else {
 turnTo = page;
 }
 self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
 this.getPage();
 this.checkPages();
 this.showTimes += 1;
 document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
 document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);
 
}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
 var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
 if(!ie) var key = e.which;
 else var key = event.keyCode;
 if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
 return false;
}
//-->
</script>
</head>

<body>
<p>
 <script language="JavaScript">
<!--
var pg = new showPages('pg');
pg.pageCount =12; // 定义总页数(必要)
//pg.argName = 'p'; // 定义参数名(可选,默认为page)

document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default');
pg.printHtml();
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0');
pg.printHtml(0);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1');
pg.printHtml(1);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2');
pg.printHtml(2);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
pg.printHtml(3);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4');
pg.printHtml(4);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5');
pg.printHtml(5);
//-->
 </script>
</p>
</body>
</html>

以上就是以上就是为大家分享的js脚本分页代码，希望大家可以喜欢。

js脚本分页代码分享（7种样式）

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
Bootstrap每天必学之按钮（一）
Nov 24 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
Oct 15 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 #Javascript
JS文字球状放大效果代码分享
Aug 19 #Javascript
IE6兼容透明背景图片及解决方案
Aug 19 #Javascript
JavaScript实现表格快速变色效果代码
Aug 19 #Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 #Javascript
JS时间特效最常用的三款
Aug 19 #Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 #Javascript
Tablespace(1) commit(1) GoFrame(3) 分布式锁(3) SQLite3(1) pytz(1) dockerfile(1) 短信验证码(1) procedure(1) harbor(1)
You might like
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php对称加密算法示例
2014/05/07 PHP
php类自动加载器实现方法
2015/07/28 PHP
分享10段PHP常用代码
2015/11/11 PHP
php blowfish加密解密算法
2016/07/02 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
layui表格实现代码
2017/05/20 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
python list语法学习（带例子）
2013/11/01 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
幼儿园中秋节活动反思
2014/02/16 职场文书
学生党员公开承诺书
2014/05/28 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
学校财务管理制度
2015/08/04 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
Python函数中的不定长参数相关知识总结
2021/06/24 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server