<html> <head> <script> var arr = [ {name:'zhoushuai1'}, //1 {name:'zhoushuai2'}, //2 {name:'zhoushuai3'}, //3 {name:'zhoushuai4'}, //4 {name:'zhoushuai5'}, //5 {name:'zhoushuai6'}, //6 {name:'zhoushuai7'}, //7 {name:'zhoushuai8'}, //8 {name:'zhoushuai9'}, //9 {name:'zhoushuai10'}, //10 {name:'zhoushuai11'}, //11 {name:'zhoushuai12'}, //12 {name:'zhoushuai13'}, //13 {name:'zhoushuai14'}, //14 {name:'zhoushuai15'}, //15 {name:'zhoushuai16'}, //16 {name:'zhoushuai17'}, //17 {name:'zhoushuai18'}, //18 {name:'zhoushuai19'}, //19 {name:'zhoushuai20'}, //20 {name:'zhoushuai21'}, //21 {name:'zhoushuai22'}, //22 {name:'zhoushuai23'}, //23 {name:'zhoushuai24'} //24 ];
var nowPage = 0; var dataCount = 10; var totalPage = 0;
function $(name){ return document.getElementById(name); }
function init(){ totalPage = Math.ceil(arr.length/dataCount); next(); }
function getData(nextOrPre){ var str = ''; if(nextOrPre == 'next'){ nowPage++; }else{ nowPage--; } var nowDataIndex = (nowPage - 1)*dataCount; if(nowDataIndex<arr.length){ for(var i = nowDataIndex;i<dataCount*nowPage;i++){ if(i<arr.length){ str+='<div style = "border:1px solid #333">'+arr[i].name+'</div>'; } } } return str; }
function pre(){ if((nowPage-1)>0){ var divObj = $('content'); if(divObj){ var data = getData('pre'); divObj.innerHTML = data; buttonCtrl(); } } }
function next(){ if((nowPage+1)<=totalPage){ var divObj = $('content'); if(divObj){ var data = getData('next'); divObj.innerHTML = data; buttonCtrl(); } } } function buttonCtrl(){ if(nowPage==totalPage){ var nextPageButton = $('nextPageButton'); nextPageButton.style.visibility = 'hidden'; }else if(nowPage == 1){ var prePageButton = $('prePageButton'); prePageButton.style.visibility = 'hidden'; }else{ var nextPageButton = $('nextPageButton'); var prePageButton = $('prePageButton'); prePageButton.style.visibility = 'visible'; nextPageButton.style.visibility = 'visible'; } }
function debug(){ alert(nowPrePage+'--->pre;'+nowNextPage+'--->next'); } </script> </head> <body onload = "init()"> <div id = "content"> </div> <a href = "#" onclick = "pre()" id = "prePageButton">上一页</a><a href = "#" onclick = "next()" id = "nextPageButton">下一页</a> </body></html>
