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


Posted in Javascript onMay 25, 2010

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

<?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>

希望对大家的学习工作又所帮助, 欢迎提问反馈
Javascript 相关文章推荐
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 #Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 #Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 #Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 #Javascript
js 设置选中行的样式的实现代码
May 24 #Javascript
基于jquery的direction图片渐变动画效果
May 24 #Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 #Javascript
You might like
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
php 生成WML页面方法详解
2009/08/09 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
设定php简写功能的方法
2019/11/28 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python学习笔记之os模块使用总结
2014/11/03 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
党员公开承诺书2016
2016/03/24 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书