效果图:
代码 :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.first{
color:#666;
display:inline-block;
vertical-align:top;
border:1px solid #e6e6e6;
padding:5px 9px;
font-size:12px;
}
#number{
display:inline-block;
vertical-align:top;
}
.num{
color:#666;
display:inline-block;
vertical-align:top;
border:1px solid #e6e6e6;
padding:5px 9px;
font-size:12px;
margin-right:6px;
}
.current{
color:#3e89fa;
font-size:12px;
display:inline-block;
vertical-align:top;
margin-left:30px;
padding:5px 9px;
}
#inp{
height:32px;
width:32px;
}
.jump{
display:inline-block;
vertical-align:top;
font-size:12px;
}
.l_jump{
display:inline-block;
vertical-align:top;
padding:5px 9px;
border:1px solid #e6e6e6;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
<div class="first" id="home">首页</div>
<div class="first" id="before">上一页</div>
<div id="number">
</div>
<div class="first" id="next">下一页</div>
<div class="first" id="last">尾页</div>
<div class="current"></div>
<div class="jump">
<input type="text" id="inp"></input>
<div class="l_jump">跳转</div>
</div>
</div>
</body>
<script type="text/javascript">
var sign=1;//记录当前第几个块,比如我规定最多显示10个块,那么sign的取值范围就是1-10
var b_sign=1;//记录sign变动之前的sign数值
var count=20;//记录总共页数
var real_count=count<=10?count:10;//定义最多有多少块
var real_change=0;
var o=0;
if(real_count%2==0)
{
real_change=real_count/2;
}
else
{
real_change=real_count/2+0.5;
var o=1;
}
//初始化块
let i=1;
while(i<=real_count)
{
var val="<div class='num' id="+i+">"+i+"</div>";
$("#number").append(val)
i++;
}
function query_all(){//查找id='number'块的所有子节点
nodes=$("#number").find("div");
length=nodes.length;
}
query_all();
function currentPage(){//获取当前page
let use="#"+sign;
$(".current").text("当前"+$(use).text()+"/"+count+"页");
}
currentPage();
var b_change=function(){//将当前第sign块样式还原
b_sign=sign;
let use="#"+b_sign;
$(use).css({"border":"1px solid #e6e6e6","color":"#666"});
}
var blue_change=function(c){//将当前sign块样式改变,好区别于其他块
let use="#"+c;
$(use).css({"border":"none","color":"#3e89fa"});
}
blue_change(sign);//页面第一次加载的时候,改变指定块样式
function go_back(now_sign,kit){//当前sign块先还原样式,再改变sign,再改变改变后的sign块样式
b_change();
if(kit==0)
{
sign=now_sign;
}
else if(kit==1)
{
if(sign!=real_count)
sign++;
}
else if(kit==2)
{
if(sign!=1)
sign--;
}
blue_change(sign);
}
function change_add(c_add,kit){//遍历改变id='number'的子节点内容
let p=c_add;
for(let j=0;j<length;j++)
{
if(kit==0){
nodes[j].innerHTML=p;
p++;
}else if(kit==1){
nodes[j].innerHTML=p;
p--;
}else if(kit==2){
nodes[j].innerHTML=parseInt(nodes[j].innerHTML)+1;
}else if(kit==3){
nodes[j].innerHTML=parseInt(nodes[j].innerHTML)-1;
}
}
}
function for_num(use,id){
let error_1="#"+real_change;
//页面在最前或最后
if($(error_1).text()==real_change||$(error_1).text()==count-real_change+1)
{
//判断点击的第一个一半的前面还是点击的第二个一半的后面
if($(use).text()<=real_change||$(use).text()>count-real_change)
{
go_back(id,0);
}
else
{
go_back(real_change,0);
change_add($(use).text()-(real_change-1),0);
}
currentPage();
}
else
{
var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
if($(use).text()<=real_change||inner)
{
if($(use).text()<=real_change)
{
go_back($(use).text(),0);
change_add(1,0);
}
else
{
go_back(real_count-(count-$(use).text()),0);
change_add(count-real_count+1,0);
}
}
else
{
go_back(real_change,0);
change_add($(use).text()-(real_change-1),0);
}
}
currentPage();
}
//遍历每个子div块,并为他们增加点击事件
for(let j=0;j<length;j++)
{
let id=nodes[j].getAttribute("id");
let use="#"+id;
$(use).bind("click",function(){
for_num(use,id);
});
}
$("#home").bind("click",function(){
go_back(1,0);
change_add(1,0);
currentPage();
});
$("#last").bind("click",function(){
go_back(real_count,0);
change_add(count-real_count+1,0);
currentPage();
});
$("#before").bind("click",function(){
let use="#"+sign;
var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change+1;
if($(use).text()<=real_change||inner)
{
go_back(0,2);
currentPage();
}
else
{
change_add(0,3);
currentPage();
}
});
$("#next").bind("click",function(){
let use="#"+sign;
if($(use).text()!=count)
{
var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
if($(use).text()<real_change||inner)
{
go_back(0,1);
currentPage();
}
else
{
change_add(0,2);
currentPage();
}
}
});
$(".l_jump").bind("click",function(){
let val=$("#inp").val();//获取输入框的值
val=parseInt(val);
if(val>=1&&val<=count)
{
var inner=(o==0)?val>=count-real_change:val>count-real_change;
if(val<=real_change||inner)//如果是在最前面的一半以前,或者是在最后面的一半以后
{
if(val<=real_change)
{
go_back(val,0);
change_add(1,0);
}
else
{
go_back(real_count-(count-val),0);
change_add(count-real_count+1,0);
}
}
else
{
go_back(real_change,0);
change_add(val-(real_change-1),0);
}
}
else
{
alert("没有这么多页");
}
currentPage();
});
</script>
</html>