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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
取键盘键位ASCII码的网页
Jul 30 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
javascript中this用法实例详解
Apr 06 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 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无刷新上传文件实现代码
2011/09/19 PHP
php 强制下载文件实现代码
2013/10/28 PHP
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Python @property装饰器原理解析
2020/01/22 Python
python中id函数运行方式
2020/07/03 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
机械设计及其自动化求职推荐信
2014/02/17 职场文书
小组合作学习反思
2014/02/18 职场文书
安全环保标语
2014/06/09 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2014年双拥工作总结
2014/11/21 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python