前端第四天跳转页面

最新推荐文章于 2024-09-30 15:42:36 发布

我不是敲键盘神

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量428

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_57410337/article/details/122242405

版权

JavaScript 分页导航页面控制前端交互

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>落雪炫舞</title>
<style>
             .style1{text-align:center;line-height:32px;color:#fff;float:left;font-size:13px;width:56px;margin-left:6px;background-color:#2ac;}
             .style2{text-align:center;float:left;width:56px;margin-left:6px;height:32px;}
             .chosed{background-color:#a00;}
</style>
</head>
<body>
                 <div id="d_1" style="height:32px;width:80%;background-color:#ccc;margin-left:10%;margin-top:50px;" ></div>
</body>
<script type="text/javascript">
           function viewPage(pageindex,pagesize,total){
           var x = document.getElementById("d_1");
           var pageall = total/pagesize;
           if(total%pagesize==0){
           pageall = total/pagesize;
          }else{
           pageall = parseInt(pageall);
           pageall +=1;
           }
           var h = '';
           h += '<div class="style1" onclick="viewPage(1,'+pagesize+','+total+')">首页</div>';
           h += '<div class="style1" onclick="viewPage('+(pageindex-1)+','+pagesize+','+total+')">上一页</div>';
           if(pageindex<3){
                  if(pageindex==1){
           h += '<div class="style1 chosed" onclick="viewPage(3,'+pagesize+','+total+')">1</div>';
           h += '<div class="style1" onclick="viewPage(4,'+pagesize+','+total+')">2</div>';
           }else{
           h += '<div class="style1" onclick="viewPage(3,'+pagesize+','+total+')">1</div>';
           h += '<div class="style1 chosed" onclick="viewPage(4,'+pagesize+','+total+')">2</div>';
           }
           h += '<div class="style1" onclick="viewPage(3,'+pagesize+','+total+')">3</div>';
           h += '<div class="style1" onclick="viewPage(4,'+pagesize+','+total+')">4</div>';
           h += '<div class="style1" onclick="viewPage(5,'+pagesize+','+total+')">5</div>';
            }else if(pageindex>pageall-2){
           h += '<div class="style1" onclick="viewPage('+(pageindex-2)+','+pagesize+','+total+')">'+(pageindex-2)+'</div>';
           h += '<div class="style1" onclick="viewPage('+(pageindex-1)+','+pagesize+','+total+')">'+(pageindex-1)+'</div>';
           h += '<div class="style1 chosed" onclick="viewPage('+pageindex+','+pagesize+','+total+')">'+pageindex+'</div>';
           h += '<div class="style1" onclick="viewPage('+(pageindex+1)+','+pagesize+','+total+')">'+(pageindex+1)+'</div>';
           h += '<div class="style1" onclick="viewPage('+(pageindex+2)+','+pagesize+','+total+')">'+(pageindex+2)+'</div>';
            }else{
           h += '<div class="style1" onclick="viewPage('+(pageindex-2)+','+pagesize+','+total+')">'+(pageindex-2)+'</div>';
           h += '<div class="style1" onclick="viewPage('+(pageindex-1)+','+pagesize+','+total+')">'+(pageindex-1)+'</div>';
           h += '<div class="style1 chosed" onclick="viewPage('+pageindex+','+pagesize+','+total+')">'+pageindex+'</div>';
           h += '<div class="style1" onclick="viewPage('+(pageindex+1)+','+pagesize+','+total+')">'+(pageindex+1)+'</div>';
           h += '<div class="style1" onclick="viewPage('+(pageindex+2)+','+pagesize+','+total+')">'+(pageindex+2)+'</div>';
           }
           h += '<div class="style1"  onclick="viewPage('+(pageindex+1)+','+pagesize+','+total+')">下一页</div>';
           h += '<div class="style1"  onclick="viewPage(1,'+pagesize+','+total+')">尾页</div>';
           h += '<div class="style1">共'+total+'条</div>';
           h += '<div class="style1">共'+pageall+'页</div>';
           h += '<div class="style2"><input type="text" style="height:26px;width:50px;"></div>';
           h += '<div class="style1" onclick="goPage('+pagesize+','+total+')">跳转</div>';
                document.getElementById("d_1").innerHTML=h;
             }
            viewPage(7,10,445);
           function goPage(pagesize,total){
                var v =document.getElementById("inp_page").value;
                v=parseInt(v);
                viewPage(v,pagesize,total);
            }
</script>
</html>