万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！

来源：互联网发布：淘宝拍卖二手车靠谱吗编辑：程序博客网时间：2024/05/23 00:00

要求：动态输入内容，点击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或QQ群：300017860。

2 0