我的聚合阅读器

最近一段时间主要在看 ajax 的资料，挺有意思的。。。做了一个简单的 RSS 阅读器（网页版）。

今天改了一下，增加一个分页。有些 RSS 请求回来动辄上百条 item 记录，不方便阅读。。。请求回来后在内存分页，不能说是真正意义上的分页~

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
< title > 我的聚合阅读器 </ title >
< style  type ="text/css" >
    body,div { font-size : 12px ; }
    #list  {  line-height : 24px ; }
    #pager a  {  text-decoration : none ; color : blue ;   }
    #pager a:hover  {  text-decoration : underline ;  color : Red ;   }
    hr  {  width : 500px ;  text-align : left ; }
    #bg  {  background-color : #666 ;  display : none ; position : absolute ; filter : progid:DXImageTransform.Microsoft.Alpha(opacity=60) ; }
    #mrssList  {  background-color : #fff ; position : absolute ;  display : none ;  text-align : center ;  width : 400px ;  height : 300px ; }
    #t  { height : 21px ; background-color : #ccc ; text-align : right ; padding : 5px 5px 0px 5px ; }
    #t a  {  text-decoration : none ; }
</ style >
< script  type ="text/javascript" >
//  JScript source code
var  curPage;
var  ajax;
function  getList()
{    
     var  tips  =  document.getElementById( " tips " );
     var  r  =  document.getElementById( " rssUrl " ).value.length == 0   ?  
            document.getElementById( " rssList " ).options[document.getElementById( " rssList " ).selectedIndex].value :
            document.getElementById( " rssUrl " ).value;

     if (r.length <= 0 )
    {
        list.innerHTML  =   " <font color=red>请选择一个 RSS 目录项目或输入 RSS 地址！</font> " ;
    }
     else
    {
        document.getElementById( " list " ).innerHTML  =   " loading " ;
        ajax  =   new  XMLHttpRequest();
    
         var  url  =  r  +   " ? "   +  Math.random();
        ajax.open( " get " ,url, true );
        ajax.send( null );
        ajax.onreadystatechange  =   function ()
        {
             if ((ajax.readyState == 4 ) && (ajax.status == 200 ))
                showPage();
             else   if ((ajax.readyState == 4 ) && (ajax.status != 200 ))
                document.getElementById( " list " ).innerHTML  =   " 读取数据错误！ " ;
        }
    }
}

function  showPage(p0)
{
    curPage  =  isNaN(p0)  ?   1  : parseInt(p0); // 当前页
     var  pager  =  document.getElementById( " pager " );
    pager.innerHTML  =   "" ;
    
     var  f  =   0 ;
    document.getElementById( " list " ).innerHTML  =   "" ;
    items  =  ajax.responseXML.getElementsByTagName( " item " );

     var  tl  =  t_len.options[t_len.selectedIndex].text;                    // 标题字数
     var  pz  =  parseInt(pageSize.options[pageSize.selectedIndex].text);    // 显示的记录数
    
     var  pageCount  =  Math.ceil(items.length  /  pz);  // 总页数
    
     // 不是最后一页，显示到当前页的记录数，否则，显示到总记录数
     var  prc  =  (curPage  ==  pageCount)  ?  items.length : pz  *  curPage;
    
     for ( var  i  =  pz  *  (curPage  -   1 ); i  <  prc; i ++ )  // 总页数 当前页记录数据
    {
        title  =  items[i].getElementsByTagName( " title " )[ 0 ].text;
         if ((title.indexOf(keyw.value)  >   0 )  ||  (keyw.value.length <= 0 ))
        {
            link  =  items[i].getElementsByTagName( " link " )[ 0 ].text;
             var  t  =  title.length > parseInt(tl)  ?  title.substring( 0 ,parseInt(tl))  +   " "  : title;
            
            a  =   " <a href=' "   +  link  +   " ' target='_blank' title=' "   +  title  +   " '> "   +  t  +   " </a> " ;
            
            document.getElementById( " list " ).innerHTML  +=  (i  +   1 )  +   " .  "   +  a  +   " <br /> " ;
            f ++ ;
        }
    }
     /* 没有找到结果 */
     if (f == 0 )
        document.getElementById( " list " ).innerHTML  =   " 没有找到符合要求的结果！ " ;
    
     /* 分页显示 */
     if (items.length  >  pz)
    {
         for ( var  i2  =   0 ;i2  <  (items.length  /  pz);i2 ++ )
        {
             if ((i2  +   1 )  ==  curPage)
               pager.innerHTML  +=   "  <font color=red>[ "   +  curPage  +   " ]</font>  " ;
             else
               pager.innerHTML  +=   "  <a href='javascript:void(0)' οnclick='javascript:showPage( "   +  (i2  +   1 )  +   " )'>[ "   +  (i2  +   1 )  +   " ]</a>  " ;
        }
    }
    pager.innerHTML  +=   " <br />共接收到  "   +  items.length  +   "  条记录！ " ; 
}

function  clsRssUrl()
{
    document.getElementById( " rssUrl " ).value = "" ;
}

function  mRssList()
{
    bg.style.width  =   " 100% " ;
    bg.style.height  =   " 100% " ;
    bg.style.display  =   " block " ;
    
     var  ms  =  mrssList.style;
    ms.display  =   " none " ;
    ms.left  =   " 100px " ;
    ms.top  =   " 60px " ;
    ms.display  =   " block " ;
    
}

function  hRssList()
{
    bg.style.display  =   " none " ;
    mrssList.style.display  =   " none " ;
}
</ script >
</ head >
< body  topmargin ="0"  leftmargin ="0" >
     < div  id ="bg" ></ div >
     < div  id ="mrssList" >
         < div  id ="t" >
         < span  style ="float:left;" > 管理 RSS 目录 </ span >
         < a  href ="javascript:void(0)"  onclick ="hRssList()" >< b > × </ b ></ a >  
         </ div >
     </ div >
     < input  type ="text"  id ="rssUrl"  style ="font-size:12px;width:500px;"   />< br  />
    RSS 目录：
     < select  id ="rssList"  onchange ="clsRssUrl()" >
         < option  value ="" > 选择一个 </ option >
         < option  value ="http://www.cnblogs.com/jarod99/rss/" > 我的博客 </ option >
         < option  value ="http://forum.csdn.net/Rss/Ajax/UnClosedList/" > CSDN Ajax </ option >
         < option  value ="http://forum.csdn.net/Rss/J2SE/UnClosedList/" > CSDN Java </ option >
         < option  value ="http://rss.sina.com.cn/news/allnews/tech.xml" > 新浪：焦点新闻 </ option >
         < option  value ="http://rss.sina.com.cn/tech/rollnews.xml" > 新浪：科技要闻汇总 </ option >
         < option  value ="http://rss.sina.com.cn/tech/notebook/193_1.xml" > 新浪：笔记本 </ option >
         < option  value ="http://rss.sina.com.cn/finance/jsy.xml" > 新浪：股市及时雨 </ option >
         < option  value ="http://rss.sina.com.cn/roll/stock/hot_roll.xml" > 新浪：股票要闻汇总 </ option >
     </ select >   < a  href ="javascript:void(0)"  onclick ="javascript:mRssList()" > 管理目录 </ a >
     < br  />
    标题显示字数设置：
     < select  id ="t_len" >
         < option > 20 </ option >
         < option > 30 </ option >
         < option > 40 </ option >
         < option  selected > 50 </ option >
     </ select >
    记录数：
     < select  id ="pageSize" >
         < option > 10 </ option >
         < option > 15 </ option >
         < option > 20 </ option >
         < option > 30 </ option >
         < option > 50 </ option >
     </ select >
     < hr  />
    关键字：
     < input  type ="text"  value =""  style ="font-size:12px; width:100px;"  id ="keyw"   />
     < input  type ="button"  style ="font-size:12px;"  value ="查找"  id ="search"  onclick ="getList()"   />
     < a  href ="javascript:void(0)"  onclick ="history.go()" > 刷新 </ a >
    
     < hr  />
     < div  id ="list" ></ div >
     < hr  />
     < div  id ="pager" ></ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/jarod99/archive/2009/04/03/1429277.html