首页
所有分类
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 相关文章推荐
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
js实现简单的轮播图效果
Dec 13 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
反射(1) HttpClient(1) 注解(1) BottomSheetDialog(1) RestTemplate(1) Windows Server 2022(3) Hive(5) ip2region(1) dataBinding(1) Quartz(1)
You might like
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jQuery知识点整理
2015/01/30 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
js实现跨域的几种方法汇总（图片ping、JSONP和CORS）
2015/10/25 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
PHP7新特性简述
2017/06/11 Javascript
总结js函数相关知识点
2018/02/27 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Python生成器常见问题及解决方案
2020/03/21 Python
什么是java序列化，如何实现java序列化
2012/11/14 面试题
思想品德课教学反思
2014/02/10 职场文书
小学生暑假家长评语
2014/04/17 职场文书
供货协议书
2014/04/22 职场文书
企业宣传标语
2014/06/09 职场文书
员工保密协议书
2014/09/27 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书