js 經過高度獲取分頁問題

時間 2019-11-20
原文原文鏈接
1本次項目主要是針對前端坐分頁效果
   內容主要的兩點是首頁顯示不顯示上一頁 最後一頁不顯示下一頁問題
2 此項目內容步驟以下：
     樣式代碼 js代碼  hmtl代碼
    
  <style>     
#frameContent{
    width:1000px;/*調整顯示區的寬*/
    height:500px;/*調整顯示區的高*/
    font-size:12px;
    line-height:23px;

    overflow-pageINdex:hidden;
    overflow-y:hidden;
    word-break:break-all;
}
#pages{
    position: relative;
    top:-80px;
    width: 100%;
    overflow:hidden;
    padding-bottom: 50px;
}
#pages a{
    position:absolute;
    right: 0;
  
    font-size:12px;
    color:#000000;
    text-decoration:underline;
}
#pages a.next_left{
    margin-right: 90px;
}
</style>
<body>
<html>
   <div id="frameContent">內容部分</div>
   <div id="pages"  class="brand_next" style="width:1000px;"></div> 
</html>
</body>

<script>
   
var obj = document.getElementById('frameContent'); // 獲取內容層
    var pages = document.getElementById('pages'); // 獲取翻頁層
    var pgindex=1; 
    var allpages ='';
    window.onload = function()                             //重寫窗體加載的事件
{
   allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));//獲取頁面數量
    
//    pages.innerHTML = "<b>共"+allpages+"頁</b> ";     //輸出頁面數量
for (var i=1;i<=allpages;i++){
   
        // pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"頁</a> ";
       //循環輸出第幾頁
    }
      
    if(allpages==1){
        pages.innerHTML = '';
     
    }else{
        pages.innerHTML = "<a  href=\"javascript:gotopage('1');\" class='next_right'><img src='images/pc/arrow_right.jpg'/></a>"
    }
    
}
function gotopage(value){
try{
 value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
 }catch(e){
 
 }
}
function showPage(pageINdex)
{
    if(pageINdex == 1 ){
    pages.innerHTML = "<a  href=\"javascript:gotopage('1');\" class='next_right'><img src='images/pc/arrow_right.jpg'/></a>"
 }
 else if(pageINdex==allpages){
    pages.innerHTML = " <a class='next_left' href=\"javascript:gotopage('-1');\"><img src='images/pc/arrow_left.jpg'/></a>"
 }else{
   
    pages.innerHTML = "<a class='next_left' href=\"javascript:gotopage('-1');\"><img src='images/pc/arrow_left.jpg'/></a><a  href=\"javascript:gotopage('1');\" class='next_right'><img src='images/pc/arrow_right.jpg'/></a>";
 }
 obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);                                                                  //根據高度，輸出指定的頁
 pgindex=pageINdex;
}

</script>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。