zoukankan      html  css  js  c++  java
  • 豆瓣 jsonp 请求数据 并分页

    豆瓣分页

      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{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{1200px;}
     17             #book dl{150px;border:1px solid #2272BD;float:left;margin:10px;height:160px; text-align:center}
     18             #book dl dt{padding:10px 0}
     19             #page{ 1000px}
     20             #page li{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{100px;border-radius:none;}
     24             #pager span.prev{float:left;}
     25             #pager span{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>
  • 相关阅读:
    HTTP Authorization
    php导出数组到csv格式demo
    nginx 配置ajax跨域访问php接口
    node.js和npm离线安装
    使用Docker快速搭建Nginx+PHP-FPM环境
    django中文件下载(HttpResponse)
    django 下载文件 无法正常打开
    C语言Review2_struct
    基础概念——回车换行
    C语言Review1_预处理器和宏
  • 原文地址:https://www.cnblogs.com/webskill/p/4181968.html
Copyright © 2011-2022 走看看