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

转-- http://www.2cto.com/kf/201402/277535.html
万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！
2014-02-11 0 个评论来源：卡布洛技术专栏
我要投稿
要求：动态输入内容，点击post生成内容条，实现自动翻页！
废话不多说，直接上代码：
js代码：
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
           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 
           (getmind= 
           "=""){alert("Please" 
           write= 
           "" 
           your= 
           "" 
           mind= 
           "" 
           ! 
           ");=" 
           " return=" 
           " false;}=" 
           " else=" 
           " if(!flag){alert(" 
           please= 
           "" 
           choose= 
           "" 
           mood= 
           "" 
           arr[arr.length]= 
           "[myDate,getMood,getMind,id];//将获取的数据放入多维数组中" 
           id++;= 
           "" 
           function= 
           "" 
           checktable(){= 
           "" 
           var= 
           "" 
           arry_return= 
           "new" 
           array();= 
           "" 
           start_t;= 
           "" 
           end_t;= 
           "" 
           start= 
           "curpage*pagesize;" 
           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<br> 
          
           css代码：<p></p> 
          
           <p></p><pre  
           class 
           = 
           "brush:java;" 
           >.container{text-align:center;} 
          
           .tit{font-size:24px;} 
          
           table{width: 
           100 
           %; border:none;} 
          
           tr,td{text-align:center;} 
          
           .tableContent{width:850px; margin: 
           0 
           auto;}</pre><br> 
          
           html代码：<p></p> 
          
           <p></p><pre  
           class 
           = 
           "brush:java;" 
           > 
          
           <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" 
           > 
          
           <tbody><tr> 
          
           <th>Date</th> 
          
           <th>Mood</th> 
          
           <th>What's in my mind</th> 
          
           <th>Delete</th> 
          
           </tr> 
          
           </tbody><tbody id= 
           "tb" 
           ></tbody> 
          
           <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> 
          
           </tbody></table> 
          
           </div> 
          
           </div> 
          
           </pre><p></p> 
          
           <p>效果图如下：</p> 
          
           <p><img src= 
           "http://www.2cto.com/uploadfile/Collfiles/20140211/2014021108532459.jpg" 
           alt= 
           "" 
           http:= 
           "" 
           www.2cto.com= 
           "" 
           soft 
           "=" 
           " target=" 
           _blank 
           " class=" 
           keylink 
           " style=" 
           width: 630px; height:  
           342 
           .43660418963617px;">下载下来就能用哟，不用积分的！ 
          
           </p><p>http: 
           //download.csdn.net/download/u010480479/6910785<br> 
          
           </p> 
          
           <p>如果有任何指教和交流，请加QQ： 
           1740437 
           。</p> 
          
           <p><br> 
          
           </p> 
          
           <p><br> 
          
           </p>                        </arr.length;></getmoods.length;>
转载于:https://www.cnblogs.com/anruy/p/5086480.html