织梦cms| 帝国cms| WordPress discuz| phpcms| z-blog| ecshop| 其他cms|

WordPress

推荐列表 站点导航

当前位置：首页 > 建站教程 > WordPress >

JS实现前端动态分页码代码实例

来源:互联网  作者:网友投稿  发布时间:2021-01-06 07:12
主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参...

主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

思路分析：有3种情况

第一种情况，当前页面curPage < 4

JS实现前端动态分页码代码实例 (https://www.wpmee.com/) javascript教程 第1张

第二种情况，当前页面curPage == 4

JS实现前端动态分页码代码实例 (https://www.wpmee.com/) javascript教程 第2张

第三种情况，当前页面curPage>4

JS实现前端动态分页码代码实例 (https://www.wpmee.com/) javascript教程 第3张

此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ...

首先，先是前端的布局样式

<body>
/*首先，在body中添加div */
<div>
<!-- 后面会在JS中动态追加 ，此处为了，实现前端效果，所以注册
<a><</a>
<a>1</a>
<a href="#" >2</a>
<a href="#" >3</a>
<a href="#" >4</a>
<span>...</span>
<a href="#">10</a>
<a href="#">></a>
-->

</div>
</body>  

其次，是css代码

*{
margin: 0;
padding: 0;
}
#pagination{
width: 500px;
height: 100px;
border: 2px solid crimson;

margin: 50px auto ;
padding-top: 50px ;
padding-left: 50px;
}

.over,.pageItem{
float: left;
display: block;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
}

.pageItem{
border: 1px solid orangered;
text-decoration: none;
color: dimgrey;
margin-right: -1px;/*解决边框加粗问题*/
}
.pageItem:hover{
background-color: #f98e4594;
color:orangered ;
}
.clearfix{
clear: both;
}
.active{
background-color: #f98e4594;
color:orangered ;
}
.banBtn{
border:1px solid #ff980069;
color: #ff980069;
}
#prevBtn{
margin-right: 10px;
}
#nextBtn{
margin-left: 10px;
}  

JavaScript代码

<script type="text/javascript">

var pageOptions = {pageTotal:10,curPage:7,paginationId:''};
dynamicPagingFunc(pageOptions);

function dynamicPagingFunc(pageOptions){
var pageTotal = pageOptions.pageTotal || 1;
var curPage = pageOptions.curPage||1;
var doc = document;
var paginationId = doc.getElementById(''+pageOptions.paginationId+'') || doc.getElementById('pagination');
var html = '';
if(curPage>pageTotal){
curPage =1;
}
/*总页数小于5，全部显示*/
if(pageTotal<=5){
html = appendItem(pageTotal,curPage,html);
paginationId.innerHTML = html;
}
/*总页数大于5时，要分析当前页*/
if(pageTotal>5){
if(curPage<=4){
html = appendItem(pageTotal,curPage,html);
paginationId.innerHTML = html;
}else if(curPage>4){
html = appendItem(pageTotal,curPage,html);
paginationId.innerHTML = html;
}
}
}

function appendItem(pageTotal,curPage,html){
var starPage = 0;
var endPage = 0;

html+='<a>&lt;</a>';

if(pageTotal<=5){
starPage = 1;
endPage = pageTotal;
}else if(pageTotal>5 && curPage<=4){
starPage = 1;
endPage = 4;
if(curPage==4){
endPage = 5;
}
}else{
if(pageTotal==curPage){
starPage = curPage-3;
endPage = curPage;
}else{
starPage = curPage-2;
endPage = curPage+1;
}
html += '<a>1</a><span>...</span>';
}

for(let i = starPage;i <= endPage;i++){
if(i==curPage){
html += '<a>'+i+'</a>';
}else{
html += '<a href="#" >'+i+'</a>';
}
}

if(pageTotal<=5){
html+='<a href="#">&gt;</a>';
}else{
if(curPage<pageTotal-2){
html += '<span>...</span>';
}
if(curPage<=pageTotal-2){
html += '<a href="#" >'+pageTotal+'</a>';
}
html+='<a href="#">&gt;</a>';
}
return html;
}

</script>  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JS实现前端动态分页码代码实例 (https://www.wpmee.com/) javascript教程 第4张

相关热词：

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jz/wp/11377.shtml

上一篇：如何吸引用户访问特色网
下一篇：linux下如何实现快速拷贝大
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程
最新文章
ludou_se_only); } add_action(s ludou_se_only); } add_action(s

时间：2021-01-23

所以经常导致输错密码的 所以经常导致输错密码的

时间：2021-01-23

WordPress措施打开速度慢的 WordPress措施打开速度慢的

时间：2021-01-22

WordPress回覆评论自动添加 WordPress回覆评论自动添加

时间：2021-01-22

我们可以通过下面的代码 我们可以通过下面的代码

时间：2021-01-22

如何修改WordPress默认脚色 如何修改WordPress默认脚色

时间：2021-01-20

同样的修改文件就行 同样的修改文件就行

时间：2021-01-20

少数善意的转载者既使没 少数善意的转载者既使没

时间：2021-01-20

热门文章
WordPress新手安装教程(图文) WordPress新手安装教程(图文)

时间：2020-12-28

在设置菜单中增加WordPress私密 隐藏的全部 在设置菜单中增加WordPress私密 隐藏的全部

时间：2021-01-10

WordPress博客程序常见错误的解决方法 WordPress博客程序常见错误的解决方法

时间：2020-12-28

WordPress程序打开速度慢的三种解决方法 WordPress程序打开速度慢的三种解决方法

时间：2021-01-10

wordpress使用代码在每篇文章尾部添加版权 wordpress使用代码在每篇文章尾部添加版权

时间：2020-12-14

WordPress博客措施常见错误的办理要领 WordPress博客措施常见错误的办理要领

时间：2021-01-15

关于WordPress的SEO优化相关的一些PHP页面脚 关于WordPress的SEO优化相关的一些PHP页面脚

时间：2021-01-07

WordPress措施打开速度慢的三种办理要领 WordPress措施打开速度慢的三种办理要领

时间：2021-01-22

详解WordPress中的头像缓存和署理中的缓存 详解WordPress中的头像缓存和署理中的缓存

时间：2021-01-15

少数善意的转载者既使没有看到版权信息 少数善意的转载者既使没有看到版权信息

时间：2021-01-20

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

JS实现前端动态分页码代码实例

2021-01-06　编辑：网友投稿

主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

思路分析：有3种情况

第一种情况，当前页面curPage < 4

JS实现前端动态分页码代码实例 (https://www.wpmee.com/) javascript教程 第1张

第二种情况，当前页面curPage == 4

JS实现前端动态分页码代码实例 (https://www.wpmee.com/) javascript教程 第2张

第三种情况，当前页面curPage>4

JS实现前端动态分页码代码实例 (https://www.wpmee.com/) javascript教程 第3张

此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ...

首先，先是前端的布局样式

<body>
/*首先，在body中添加div */
<div>
<!-- 后面会在JS中动态追加 ，此处为了，实现前端效果，所以注册
<a><</a>
<a>1</a>
<a href="#" >2</a>
<a href="#" >3</a>
<a href="#" >4</a>
<span>...</span>
<a href="#">10</a>
<a href="#">></a>
-->

</div>
</body>  

其次，是css代码

*{
margin: 0;
padding: 0;
}
#pagination{
width: 500px;
height: 100px;
border: 2px solid crimson;

margin: 50px auto ;
padding-top: 50px ;
padding-left: 50px;
}

.over,.pageItem{
float: left;
display: block;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
}

.pageItem{
border: 1px solid orangered;
text-decoration: none;
color: dimgrey;
margin-right: -1px;/*解决边框加粗问题*/
}
.pageItem:hover{
background-color: #f98e4594;
color:orangered ;
}
.clearfix{
clear: both;
}
.active{
background-color: #f98e4594;
color:orangered ;
}
.banBtn{
border:1px solid #ff980069;
color: #ff980069;
}
#prevBtn{
margin-right: 10px;
}
#nextBtn{
margin-left: 10px;
}  

JavaScript代码

<script type="text/javascript">

var pageOptions = {pageTotal:10,curPage:7,paginationId:''};
dynamicPagingFunc(pageOptions);

function dynamicPagingFunc(pageOptions){
var pageTotal = pageOptions.pageTotal || 1;
var curPage = pageOptions.curPage||1;
var doc = document;
var paginationId = doc.getElementById(''+pageOptions.paginationId+'') || doc.getElementById('pagination');
var html = '';
if(curPage>pageTotal){
curPage =1;
}
/*总页数小于5，全部显示*/
if(pageTotal<=5){
html = appendItem(pageTotal,curPage,html);
paginationId.innerHTML = html;
}
/*总页数大于5时，要分析当前页*/
if(pageTotal>5){
if(curPage<=4){
html = appendItem(pageTotal,curPage,html);
paginationId.innerHTML = html;
}else if(curPage>4){
html = appendItem(pageTotal,curPage,html);
paginationId.innerHTML = html;
}
}
}

function appendItem(pageTotal,curPage,html){
var starPage = 0;
var endPage = 0;

html+='<a>&lt;</a>';

if(pageTotal<=5){
starPage = 1;
endPage = pageTotal;
}else if(pageTotal>5 && curPage<=4){
starPage = 1;
endPage = 4;
if(curPage==4){
endPage = 5;
}
}else{
if(pageTotal==curPage){
starPage = curPage-3;
endPage = curPage;
}else{
starPage = curPage-2;
endPage = curPage+1;
}
html += '<a>1</a><span>...</span>';
}

for(let i = starPage;i <= endPage;i++){
if(i==curPage){
html += '<a>'+i+'</a>';
}else{
html += '<a href="#" >'+i+'</a>';
}
}

if(pageTotal<=5){
html+='<a href="#">&gt;</a>';
}else{
if(curPage<pageTotal-2){
html += '<span>...</span>';
}
if(curPage<=pageTotal-2){
html += '<a href="#" >'+pageTotal+'</a>';
}
html+='<a href="#">&gt;</a>';
}
return html;
}

</script>  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JS实现前端动态分页码代码实例 (https://www.wpmee.com/) javascript教程 第4张

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供学习参考！
本文地址为 https://v30.fanwenzhu.com/jz/wp/11377.shtml

相关文章

风云图片

ludou_se_only); } add_action(s

ludou_se_only); } add_action(s

所以经常导致输错密码的

所以经常导致输错密码的

WordPress措施打开速度慢的

WordPress措施打开速度慢的

WordPress回覆评论自动添加

WordPress回覆评论自动添加

我们可以通过下面的代码

我们可以通过下面的代码

如何修改WordPress默认脚色

如何修改WordPress默认脚色

推荐阅读

返回WordPress频道首页