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 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
Javascript中this的用法详解
Sep 22 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
php采集速度探究总结(原创)
2008/04/18 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
基于python实现计算两组数据P值
2020/07/10 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
房地产项目建议书
2014/03/12 职场文书
就业意向书范文
2014/04/01 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
董事长秘书工作职责
2014/06/10 职场文书
《实心球》教学反思
2016/02/23 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python