js簡單翻頁效果邏輯例項
阿新 • • 發佈：2019-01-03
<!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>
<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>