萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> js對文章內容進行分頁的具體實現

js對文章內容進行分頁的具體實現

 這篇文章主要介紹了使用js對文章內容進行分頁的具體實現,需要的朋友可以參考下

Thinkphp中文章顯示代碼:  代碼如下: <div id="showContent">{$article.content|htmlspecialchars_decode}</div>  <div id="articlePages"></div>    js實現代碼:   代碼如下: <script type="text/javascript">  var obj = document.getElementById("showContent");  var pages= document.getElementById("articlePages");  //alert(obj.scrollHeight);  window.onload= function()  {  var all=Math.ceil(parseInt(obj.scrollHeight)/ parseInt(obj.offsetHeight));  //獲取總頁數,主要是應用scrollHeight  pages.innerHTML="共"+ all +"頁";  for(var i=1; i<=all;i++)  {  pages.innerHTML +=" <a href=javascript:showPage('"+i+"');> "+i+"</a> ";  //輸出所有頁碼  }  }  function showPage(pageIndex)  {  obj.scrollTop = (pageIndex-1)* parseInt(obj.offsetHeight);  }  </script>    css代碼:   代碼如下: #showContent {  color:black;  font-size: 16px;  height: 700px;  overflow: hidden;  }  #articlePages {  text-align: right;  } 
copyright © 萬盛學電腦網 all rights reserved