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

网络编程 2024/11/16 佚名

3 1 2

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

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

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

为大家再分享实现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('[\"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">"First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
 strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">"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">"Last Page">»</span>';
 } else {
 strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">"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">"First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
 strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">"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">"Last Page">»</span>';
 } else {
 strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">"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">"First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
 strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">"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">"Last Page">»</span>';
 } else {
 strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">"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('([\"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""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脚本代码,js实现分页代码,js分页代码,纯js前段实现分页代码

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“js脚本分页代码分享（7种样式）”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

七夕情人节丘比特射箭小游戏

贴近用户体验的Jquery日期、时间选择插件

评论“js脚本分页代码分享（7种样式）”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

七夕情人节丘比特射箭小游戏

贴近用户体验的Jquery日期、时间选择插件

评论“js脚本分页代码分享（7种样式）”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存