• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
掩耳盗心
博客园    首页    新随笔    联系   管理    订阅  订阅

JavaScript 操作 XML 实例 (获取新闻标题并分页,并分页)

XML 代码部分 这是一个新闻的XML 文件,如果 NBody部分包含 XML 和Html 不可识别部分, 就 包含在DATA 表示附中。

具体内容我没有做测试。仅供参考

代码

<?xml version="1.0" encoding="gb2312"?>
<NEWS>
   
<New id="1"  name="测试新闻1" time="2010-2-18">
    
<NBody>新闻测试1新闻测试1</NBody>
  
</New>
  
<New id="2"  name="测试新闻2" time="2010-2-18">
    
<NBody>新闻测试2新闻测试2</NBody>
  
</New>
  
<New id="3"  name="测试新闻3" time="2010-2-18">
    
<NBody>新闻测试3新闻测试3</NBody>
  
</New>
  
<New id="4"  name="测试新闻4" time="2010-2-18">
    
<NBody>新闻测试4新闻测试4</NBody>
  
</New>
  
<New id="5"  name="测试新闻5" time="2010-2-18">
    
<NBody>新闻测试5新闻测试5</NBody>
  
</New>
  
<New id="6"  name="测试新闻6" time="2010-2-18">
    
<NBody>新闻测试6新闻测试6</NBody>
  
</New>
  
<New id="7"  name="测试新闻7" time="2010-2-18">
    
<NBody>新闻测试7新闻测试7</NBody>
  
</New>
  
<New id="8"  name="测试新闻8" time="2010-2-18">
    
<NBody>新闻测试8新闻测试8</NBody>
  
</New>
  
<New id="9"  name="测试新闻9" time="2010-2-18">
    
<NBody>新闻测试9新闻测试9</NBody>
  
</New>
</NEWS>

 

 

JS 代码部分。js部分代码比较简单。 重要的就几XML 操作函数

代码
//JavaScript
function bindNew(index)
{
    
var  List = new Array(); 
    List 
= showPage(index);
    
var listul = "<ul style=\" font-size:12px \">"
    
for( var i=0 ; i < List.length ; i++)
    {
        
//document.getElementById("listTb").innerHTML += List[i]+"</br>";
        listul += "<li style=\" margin-top:4px\">"+ List[i] + "</li>";
    }
    listul 
+= "</ul>";
    document.getElementById(
"listTb").innerHTML = listul;
    
    document.getElementById(
"refer").innerHTML = "";
    
var tc = rtnPageCount();
    
for( var i=1 ; i<=tc ; i++)
    {
        
//<div style="width:14px; height:12px; color:#FFFFFF; background-color:#000000; float:left"></div>
        document.getElementById("refer").innerHTML += "<div style=\"width:14px; height:14px; color:#FFFFFF; background-color:#000000; float:left; cursor:hand\" onclick=\" bindNew("+i+")\">"+ i +"</div>";
        }
}

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async 
= false;
xmlDoc.resolveExternals 
= false;
xmlDoc.load(
"News.xml");


// 返回固定 ID 的新闻
function findNew(newid)
{
    
var Domelement = xmlDoc.documentElement;
    alert(Domelement);
}
// 返回分页后的新闻标题连接
var pageSize = 40;
function showPage(pageIndex)
{
    
var Alltt = new Array();
    Alltt 
= AlltitleLink();
    
var rtLinks = new Array();
    
/*未完成部分*/
    
try
    {
        
for( var i=0 ; i< pageSize && (pageSize*(pageIndex-1)+i)<Alltt.length ; i++)
        { 
           rtLinks[i] 
= Alltt[pageSize*(pageIndex-1)+i];
            }
     }
     
catch(e)
     { alert(
"showPage() 方法出错 !"); }
    
return rtLinks;    
}
//返分页后的页数
function rtnPageCount()
{
    
var countx = getCount();
    
if(countx%pageSize == 0)
    {
    
return  countx/pageSize ;
    }
    
else
    {
        
return countx/pageSize + 1 ;
        }
    }

//返回新闻条数
function getCount()
{
    
var NewRoot = xmlDoc.documentElement;
    
var AllNews = NewRoot.childNodes;
    
return AllNews.length;
}

//返回固定条数的新闻标题连接

function returnNews(count)
{
    
var titles = new Array();
    
var j = 0;
    NewRoot 
= xmlDoc.documentElement;
    allNews 
= NewRoot.childNodes;
    
for( var i=0 ; i<allNews.length ; i++ )
    {
        
if(i >= allNews.lenth)
        {
            titles[j] 
= "<a herf=\"../News.html?id=" + (i+1) + "\">"+ allNews[i].getArrtibute("name") +"</a>";
            j++;
            }
        }
    return titles;
}

//发回所有新闻 标题的超连接
function AlltitleLink()
{
    var allttLink = new Array();
    var NewRoot = xmlDoc.documentElement ;
    var allNews = NewRoot.childNodes;
    for( var i=0 ; i<allNews.length ; i++ )
    {
        var context = allNews[i];
        allttLink[i] = 
"<a href=\"../News.html?id="+(i+1)+"\">"+ context.getAttribute("time")+ " : " + context.getAttribute("name") +"</a>";
    }
    
return allttLink;
}

 

 

部分Html 代码

 

代码
<table width="90%" border="0" cellspacing="0" cellpadding="0" style="font-size:12px; text-align:left">
          
<tr>
            
<td><div style="width:400px; border-bottom:1px dotted #999999; color:#333333; font-weight:bold">全部动态>></div></td>
          
</tr>
          
<tr>
            
<td>
            
<div id="listTb" class="listul"></div>            </td>
          
</tr>
          
<tr>
            
<td>
            
<div id="refer"></div>            </td>
          
</tr>
        
</table>

 

 

希望对大家的学习工作又所帮助, 欢迎提问反馈

posted @ 2010-05-25 20:07  剑在心中  阅读(431)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3