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 相关文章推荐
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JS实现拖动模糊框特效
Aug 25 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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代码
2006/12/06 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php读取excel文件的简单实例
2013/08/26 PHP
yii操作session实例简介
2014/07/31 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
2015年幼师个人工作总结
2015/10/15 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
心得体会格式及范文
2016/01/25 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL