js简单翻页效果逻辑实例

最新推荐文章于 2024-08-09 08:20:09 发布

晨晨快跑

最新推荐文章于 2024-08-09 08:20:09 发布

阅读量1k

点赞数

分类专栏：技术文章标签： js

本文链接：https://blog.csdn.net/baidu_38027860/article/details/79578129

版权

技术专栏收录该内容

118 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body,html{
width: 100%;
height: 80%;
font-size: 62.5%;
background: rgb(245,245,245);
}

*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#fenye{
width:80% ;
margin: 5rem auto;
}
#fenye>li{
width: 10%;
margin-left: 1rem;
height: 4rem;
float: left;
line-height: 4rem;
text-align: center;
border: 1px solid #ddd;
font-size: 2rem;
}
</style>
<body>

<ul id="fenye"></ul>

<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var total =130
var size =10
var page = Math.ceil(total/size);
var li = ''
if(page>5){
li += '<li value="1">1</li>'+
'<li value="2">2</li>'+
'<li value="3">3</li>'+
'<li value="4">4</li>'+
'<li value="5">5</li>'+
'<li value="dian" class="dian">...</li>'+
'<li value='+page+'>'+page+'</li>'
$('#fenye').append($(li))
} else {
for(var i=0,j=1;i<page;i++,j++){
li+="<li value="+j+">"+j+"</li>";
}
$('#fenye').append($(li))
}
$("#fenye>li:not(.dian)").click(function(){
//获取当前页码数
var start=$(this).text();
//获取当前点击的li value
if($(this).val()==5){
//点击第五个li的情况
for(var i=0;i<6;i++){
$("#fenye>li:nth-child("+i+")").text(parseInt($("#fenye>li:nth-child("+i+")").text())+5)
if($("#fenye>li:nth-child("+i+")").text()>page){
$("#fenye>li:nth-child("+i+")").css("display","none")
$("#fenye>li:last-child").hide()
$("#fenye>li.dian").hide()
}
if(parseInt($("#fenye>li:nth-child(5)").text())>=parseInt($("#fenye>li:last-child").text())){
$("#fenye>li:last-child").hide()
$("#fenye>li.dian").hide()
return false;
}
}
}else if($(this).val()==1){
if($(this).text()==1){
//如果点击的是第一页码的情况不执行操作，
}else{
//否则如果是已经追加一次的情况，需要所有text-5
$("#fenye>li:last-child").show()
$("#fenye>li.dian").show()
for(var i=0;i<6;i++){
$("#fenye>li:nth-child("+i+")").text(parseInt($("#fenye>li:nth-child("+i+")").text())-5)
$("#fenye>li:nth-child("+i+")").css("display","block")
}
}
}
})
</script>
</body>
</html>