豆瓣分页
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.豆瓣分页</title>
<meta name="author" content="Administrator" />
<!-- Date: -- -->
<style>
*{margin:;padding:;font-size:13px;font-family: microsoft yahei}
li{list-style:none}
#text{width:200px;padding:5px;border:1px solid orange}
#btn{padding:4px 5px;background:orange; border:1px solid #e53d0f;cursor:pointer}
#btn:hover{background: #f1b931}
#book{width:1200px;}
#book dl{width:150px;border:1px solid #2272BD;float:left;margin:10px;height:160px; text-align:center}
#book dl dt{padding:10px }
#page{ width:1000px}
#page li{width:30px;height:30px;border:1px solid #;border-radius:5px;text-align:center;line-height:30px;float:left;margin:3px;cursor:pointer}
#page li:hover{background:yellow}
#page li.active{background:red}
#page li.prev, #page li.next{width:100px;border-radius:none;}
#pager span.prev{float:left;}
#pager span{width:50px;height:30px;background:orange;cursor:pointer;border:1px solid orange;text-align:center;line-height:30px;display: inline-block;margin:3px;}
#pager{clear:both}
</style>
<script>
function fn1(data){
var oTxt=document.getElementById('text');
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('book');
var oTotalText=document.getElementById('result'); var oTotalResulte=data['opensearch:totalResults'].$t;
var oIndex=; oTotalText.innerHTML='共搜索到'+oTotalResulte+'结果' //加内容
addContent()
function addContent(){
var str='';
for(var i=;i<data.entry.length;i++){
//var oDl=document.createElement('dl');
str+='<dl><dt>'+data.entry[i]['title']['$t']+'</dt><dd><img src="'+data.entry[i]['link'][]['@href']+'"/></dd></dl>';
//oDiv.appendChild(oDl);
}
oDiv.innerHTML=str;
} } function fn2(data){
//分页
var oTxt=document.getElementById('text');
var oTotalResulte=data['opensearch:totalResults'].$t;
var oPager=document.getElementById('pager');
var oPage=document.getElementById('page');
var oSorter=document.getElementById('sorter');
var pageNum=Math.ceil(oTotalResulte/(data['opensearch:itemsPerPage'].$t));
var iNow=;
var str1='';
for(var i=;i<;i++){
str1+='<li>'+(i+)+'</li>';
}
oPage.innerHTML=str1;
var oPrev=document.createElement('span');
oPrev.className='prev';
oPrev.innerHTML='上一页';
oPager.insertBefore(oPrev,oPage); var oNext=document.createElement('span');
oNext.className='next';
oNext.innerHTML='下一页';
oPager.appendChild(oNext); //分页点击
var aLi=oPage.getElementsByTagName('li');
aLi[iNow].className='active';
oSorter.innerHTML= (iNow+)+'/'+pageNum; for(var i=;i<aLi.length;i++){
aLi[i].index=i; aLi[i].onmouseover=function(){
for(var i=;i<aLi.length;i++){
if(aLi[i].className!='active'){
aLi[i].className=""
}
}
this.classname="hover";
} aLi[i].onclick=function(){
for(var i=;i<aLi.length;i++){
aLi[i].className=""
}
iNow=this.index;
console.log(iNow);
oSorter.innerHTML= (iNow+)+'/'+pageNum;
this.className="active";
oIndex = (data['opensearch:itemsPerPage'].$t)*iNow;
var oScript=document.createElement('script');
oScript.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn1&start-index='+oIndex;
document.body.appendChild(oScript);
//addContent()
} //上一页 下一页点击
var aSpan=oPager.getElementsByTagName('span');
aSpan[].onclick=function(){
for(var i=;i<aLi.length;i++){
if(aLi[i].className=='active'){
iNow=i;
}
aLi[i].className=''; }
iNow++;
if(iNow<aLi.length){
aLi[iNow].className='active';
}
oSorter.innerHTML= (iNow+)+'/'+pageNum;
console.log(iNow); oIndex = (data['opensearch:itemsPerPage'].$t)*iNow;
var oScript=document.createElement('script');
oScript.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn1&start-index='+oIndex;
document.body.appendChild(oScript);
} aSpan[].onclick=function(){
for(var i=;i<aLi.length;i++){
if(aLi[i].className=='active'){
iNow=i;
}
aLi[i].className=''; } if(iNow>){
iNow--;
} if(iNow < aLi.length ){
aLi[iNow].className='active';
} oSorter.innerHTML= (iNow+)+'/'+pageNum;
console.log(iNow); oIndex = (data['opensearch:itemsPerPage'].$t)*iNow;
var oScript=document.createElement('script');
oScript.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn1&start-index='+oIndex;
document.body.appendChild(oScript);
} }
} window.onload=function(){ var oTxt=document.getElementById('text');
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
if(oTxt.value!=''){
var oScript=document.createElement('script');
oScript.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn1';
document.body.appendChild(oScript); var oScript1=document.createElement('script');
oScript1.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn2';
document.body.appendChild(oScript1); } }
}
</script>
</head>
<body>
<input type="text" id="text" />
<input type="button" value="搜索" id="btn" />
<div id="result"></div>
<div id="book"></div>
<div id="pager">
<ul id="page"></ul>
</div>
<div id="sorter"></div>
</body>
</html>