豆瓣 jsonp 请求数据并分页

豆瓣分页
 <!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>
巴特西

豆瓣 jsonp 请求数据并分页

最新文章

热门文章

巴特西

豆瓣 jsonp 请求数据 并分页

最新文章

热门文章

豆瓣 jsonp 请求数据并分页
