萬能js實現翻頁，動態產生內容自動翻頁，相容各種瀏覽器（已測試）----神器版！

最後更新：2014-02-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

要求：動態輸入內容，點擊post產生內容條，實現自動翻頁！

廢話不多說，直接上代碼：

js代碼：

var date=new Date();var myDate=date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();var arr=new Array();var pagesize=8;var curpage=0;var id=0;var ind=0;function getContent(){var getMind=document.getElementById("mindBox").value.replace(/(^\s*)|(\s*$)/g,"");var getMoods=document.getElementsByName("Answer");var flag=false;var getMood=""for(var i=0; i<getMoods.length; i++){if(getMoods[i].checked){flag=true;ind=i;}}if(ind==0){getMood="1.png"}else if(ind==1){getMood="2.png"}else if(ind==2){getMood="3.png"}if(getMind==""){alert("Please write your mind !"); return false;}else if(!flag){alert("Please choose your mood !"); return false;}arr[arr.length]=[myDate,getMood,getMind,id];//將擷取的資料放入多維陣列中id++;}function checkTable(){var arry_return = new Array();var start_t;var end_t;var start=curpage*pagesize;if(pagesize+start<arr.length){start_t = start;end_t=pagesize+start;for(var i=arr.length-(end_t-start_t); i<arr.length; i++){arry_return.push(arr[i]);}}else if(pagesize+start>=arr.length&&start<=arr.length){start_t = start;end_t=arr.length;for(var i=0; i<(arr.length-start_t); i++){arry_return.push(arr[i]);}}else if(start>arr.length){return arry_return;}return arry_return;//將篩選後的資料放到新的數組中}function showTable(array){//將資料迴圈展示在頁面中var tbodyBox=document.getElementById("tb");var t=tbodyBox.childNodes;for(var m=t.length-1; m>=0; m--){tbodyBox.removeChild(t[m]);}for(var i=array.length-1;i>=0;i--){var row=document.createElement("tr"); 　　var cellDate=document.createElement("td"); 　　　cellDate.appendChild(document.createTextNode(array[i][0]));var cellMood=document.createElement("td"); var img=document.createElement("img");img.setAttribute("src",array[i][1]);cellMood.appendChild(img);//cellMood.appendChild(document.createTextNode(array[i][1]));var cellMind=document.createElement("td"); cellMind.appendChild(document.createTextNode(array[i][2]));var cellDelete=document.createElement("td"); var inp=document.createElement("input");inp.setAttribute("type","button");inp.setAttribute("value","delete");inp.setAttribute("id",array[i][3]);inp.setAttribute("onclick","del(this)");cellDelete.appendChild(inp);　　row.appendChild (cellDate);row.appendChild(cellMood);row.appendChild(cellMind);row.appendChild(cellDelete);tbodyBox.appendChild(row);}}function submitMind(){//input提交getContent();showTable(checkTable());document.getElementById("pagecount").innerHTML=arr.length;document.getElementById("pagenum").innerHTML=Math.ceil(arr.length/pagesize);}function PerPage(){//上一頁(curpage<1)?curpage=0:curpage--;showTable(checkTable());}function NextPage(){//下一頁var pagecount=Math.ceil(arr.length/pagesize);(curpage<(pagecount-1))?curpage++:document.getElementById("pageDown").disabled="true";showTable(checkTable());}function del(temp){//刪除某條特定的資料var getID=temp.id;for(var i=0; i<arr.length; i++){if(arr[i][3]==getID){arr.splice(i,1);}}showTable(checkTable());document.getElementById("pagecount").innerHTML=arr.length;document.getElementById("pagenum").innerHTML=Math.ceil(arr.length/pagesize);}

css代碼：

.container{text-align:center;}.tit{font-size:24px;}table{width:100%; border:none;}tr,td{text-align:center;}.tableContent{width:850px; margin:0 auto;}

html代碼：

<body><div class="container">  <h1>My Micro Blog</h1>  <span class="tit">What's in my mind:</span>  <input type="text" id="mindBox" size="100" maxlength="400" />  <br />  <br />  <span class="tit">Today's mood:</span>  <input type="radio" name="Answer" value="1" />  Over the moon  <input type="radio" name="Answer" value="2" />  Happy  <input type="radio" name="Answer" value="3" />  Sad  <input type="submit" value="Post" onClick="submitMind()" />  <br />  <div class="tableContent"><table id="tableBox"><tr>    <th>Date</th>        <th>Mood</th>        <th>What's in my mind</th>        <th>Delete</th>    </tr>    <tbody id="tb"></tbody>     <tr>        <td colspan="4" style=" background:#DDF4F6; line-height:32px;"><span class="fan" style="padding:0;">  <span id="pageUp" style="cursor:pointer;" onClick="PerPage()">prev</span>  <span id="pageDown" style="cursor:pointer;" onClick="NextPage()">next</span> <span>共  <span id="pagenum">1</span>頁  <span id="pagecount">0</span>條</span> </span></td>      </tr></table></div></div></body>

如下：

圖片的檔案隨便找個替換就行了，如果想看源碼，到下個地址查看，下載下來就能用喲，不用積分的！

http://download.csdn.net/download/u010480479/6910785

如果有任何指教和交流，請加QQ：1740437。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More