萬能js實現翻頁，動態生成內容自動翻頁，相容各種瀏覽器（已測試）----神器版！
阿新 • • 發佈：2019-02-13
要求：動態輸入內容，點選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>
效果圖如下：
如果有任何指教和交流，請加QQ：1740437或QQ群：300017860。