豆瓣分页
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>6.豆瓣分页</title>
8 <meta name="author" content="Administrator" />
9 <!-- Date: 2014-12-23 -->
10 <style>
11 *{margin:0;padding:0;font-size:13px;font-family: microsoft yahei}
12 li{list-style:none}
13 #text{width:200px;padding:5px;border:1px solid orange}
14 #btn{padding:4px 5px;background:orange; border:1px solid #e53d0f;cursor:pointer}
15 #btn:hover{background: #f1b931}
16 #book{width:1200px;}
17 #book dl{width:150px;border:1px solid #2272BD;float:left;margin:10px;height:160px; text-align:center}
18 #book dl dt{padding:10px 0}
19 #page{ width:1000px}
20 #page li{width:30px;height:30px;border:1px solid #008000;border-radius:5px;text-align:center;line-height:30px;float:left;margin:3px;cursor:pointer}
21 #page li:hover{background:yellow}
22 #page li.active{background:red}
23 #page li.prev, #page li.next{width:100px;border-radius:none;}
24 #pager span.prev{float:left;}
25 #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;}
26 #pager{clear:both}
27 </style>
28 <script>
29 function fn1(data){
30 var oTxt=document.getElementById(‘text‘);
31 var oBtn=document.getElementById(‘btn‘);
32 var oDiv=document.getElementById(‘book‘);
33 var oTotalText=document.getElementById(‘result‘);
34
35
36 var oTotalResulte=data[‘opensearch:totalResults‘].$t;
37 var oIndex=1;
38
39
40 oTotalText.innerHTML=‘共搜索到‘+oTotalResulte+‘结果‘
41
42
43
44 //加内容
45 addContent()
46 function addContent(){
47 var str=‘‘;
48 for(var i=0;i<data.entry.length;i++){
49 //var oDl=document.createElement(‘dl‘);
50 str+=‘<dl><dt>‘+data.entry[i][‘title‘][‘$t‘]+‘</dt><dd><img src="‘+data.entry[i][‘link‘][2][‘@href‘]+‘"/></dd></dl>‘;
51 //oDiv.appendChild(oDl);
52 }
53 oDiv.innerHTML=str;
54 }
55
56 }
57
58 function fn2(data){
59 //分页
60 var oTxt=document.getElementById(‘text‘);
61 var oTotalResulte=data[‘opensearch:totalResults‘].$t;
62 var oPager=document.getElementById(‘pager‘);
63 var oPage=document.getElementById(‘page‘);
64 var oSorter=document.getElementById(‘sorter‘);
65 var pageNum=Math.ceil(oTotalResulte/(data[‘opensearch:itemsPerPage‘].$t));
66 var iNow=0;
67 var str1=‘‘;
68 for(var i=0;i<10;i++){
69 str1+=‘<li>‘+(i+1)+‘</li>‘;
70 }
71 oPage.innerHTML=str1;
72 var oPrev=document.createElement(‘span‘);
73 oPrev.className=‘prev‘;
74 oPrev.innerHTML=‘上一页‘;
75 oPager.insertBefore(oPrev,oPage);
76
77 var oNext=document.createElement(‘span‘);
78 oNext.className=‘next‘;
79 oNext.innerHTML=‘下一页‘;
80 oPager.appendChild(oNext);
81
82
83
84
85
86 //分页点击
87 var aLi=oPage.getElementsByTagName(‘li‘);
88 aLi[iNow].className=‘active‘;
89 oSorter.innerHTML= (iNow+1)+‘/‘+pageNum;
90
91 for(var i=0;i<aLi.length;i++){
92 aLi[i].index=i;
93
94 aLi[i].onmouseover=function(){
95 for(var i=0;i<aLi.length;i++){
96 if(aLi[i].className!=‘active‘){
97 aLi[i].className=""
98 }
99 }
100 this.classname="hover";
101 }
102
103
104 aLi[i].onclick=function(){
105 for(var i=0;i<aLi.length;i++){
106 aLi[i].className=""
107 }
108 iNow=this.index;
109 console.log(iNow);
110 oSorter.innerHTML= (iNow+1)+‘/‘+pageNum;
111 this.className="active";
112 oIndex = (data[‘opensearch:itemsPerPage‘].$t)*iNow;
113 var oScript=document.createElement(‘script‘);
114 oScript.src=‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn1&start-index=‘+oIndex;
115 document.body.appendChild(oScript);
116 //addContent()
117 }
118
119 //上一页 下一页点击
120 var aSpan=oPager.getElementsByTagName(‘span‘);
121 aSpan[1].onclick=function(){
122 for(var i=0;i<aLi.length;i++){
123 if(aLi[i].className==‘active‘){
124 iNow=i;
125 }
126 aLi[i].className=‘‘;
127
128 }
129 iNow++;
130 if(iNow<aLi.length){
131 aLi[iNow].className=‘active‘;
132 }
133 oSorter.innerHTML= (iNow+1)+‘/‘+pageNum;
134 console.log(iNow);
135
136 oIndex = (data[‘opensearch:itemsPerPage‘].$t)*iNow;
137 var oScript=document.createElement(‘script‘);
138 oScript.src=‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn1&start-index=‘+oIndex;
139 document.body.appendChild(oScript);
140 }
141
142 aSpan[0].onclick=function(){
143 for(var i=0;i<aLi.length;i++){
144 if(aLi[i].className==‘active‘){
145 iNow=i;
146 }
147 aLi[i].className=‘‘;
148
149 }
150
151 if(iNow>0){
152 iNow--;
153 }
154
155 if(iNow < aLi.length ){
156 aLi[iNow].className=‘active‘;
157 }
158
159
160 oSorter.innerHTML= (iNow+1)+‘/‘+pageNum;
161 console.log(iNow);
162
163 oIndex = (data[‘opensearch:itemsPerPage‘].$t)*iNow;
164 var oScript=document.createElement(‘script‘);
165 oScript.src=‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn1&start-index=‘+oIndex;
166 document.body.appendChild(oScript);
167 }
168
169
170
171
172 }
173 }
174
175 window.onload=function(){
176
177 var oTxt=document.getElementById(‘text‘);
178 var oBtn=document.getElementById(‘btn‘);
179 oBtn.onclick=function(){
180 if(oTxt.value!=‘‘){
181 var oScript=document.createElement(‘script‘);
182 oScript.src=‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn1‘;
183 document.body.appendChild(oScript);
184
185 var oScript1=document.createElement(‘script‘);
186 oScript1.src=‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn2‘;
187 document.body.appendChild(oScript1);
188
189 }
190
191 }
192 }
193 </script>
194 </head>
195 <body>
196 <input type="text" id="text" />
197 <input type="button" value="搜索" id="btn" />
198 <div id="result"></div>
199 <div id="book"></div>
200 <div id="pager">
201 <ul id="page"></ul>
202 </div>
203 <div id="sorter"></div>
204 </body>
205 </html>
时间： 2024-10-29 12:43:09