JavaScript操纵XML 行使百度RSS作为消息源示例

JavaScript操纵XML 行使百度RSS作为消息源示例

宣布于 2016-09-30 09:04:40 | 23 次阅读 | 评述: 0 | 来历: 网友投递

这里有奇怪出炉的Javascript教程,措施狗速率看过来!

JavaScript客户端剧本说话Javascript 是一种由Netscape的LiveScript成长而来的原型化担任的基于工具的动态范例的区分巨细写的客户端剧本说话,首要目标是为了办理处事器端说话,好比Perl,遗留的速率题目,为客户提供更流通的赏识结果。

JavaScript操纵XML 行使百度RSS作为消息源示例,必要的伴侣可以参考下
js操纵xml源,作为页面的动态消息
参考JS源码如下(存为rss.js文件):
var main = document.getElementById("content").getElementsByTagName("DIV"); /* * 当前目次下面有一个名为xml的子文件夹,下面引用的源生涯在目次下。 * 下面每一行的冒号前面是文件名,后头是xml源地点(可以从源址下载获得xml文件,下载后生涯为对应文件名) * 可以在下面的地点上单击右键,选择方针另存为,下载后获得的是txt文件,变动扩展名为xml即可 * movie:"http://news.baidu.com/n?cmd=1&class=film&tn=rss" * woman:"http://news.baidu.com/n?cmd=1&class=healthnews&tn=rss" * house:"http://news.baidu.com/n?cmd=1&class=housenews&tn=rss" * car:"http://news.baidu.com/n?cmd=1&class=autonews&tn=rss" * sport:"http://news.baidu.com/n?cmd=1&class=sportnews&tn=rss" * edu:"http://news.baidu.com/n?cmd=1&class=edunews&tn=rss" */ var RssSource = { movie: "xml/movie.xml", woman: "xml/woman.xml", house: "xml/house.xml", car: "xml/car.xml", sport: "xml/sport.xml", edu: "xml/edu.xml" } function Init() { LoadXml(RssSource.movie, main[0]); LoadXml(RssSource.woman, main[1]); LoadXml(RssSource.house, main[2]); LoadXml(RssSource.car, main[3]); LoadXml(RssSource.sport, main[4]); LoadXml(RssSource.edu, main[5]); } function LoadXml(url, target) { var xml = null; var isIE = true; if (window.ActiveXObject) //IF IE { xml = new ActiveXObject("Microsoft.XMLDOM"); isIE = true; } else if (document.implementation.createDocument) //IF FF { xml = document.implementation.createDocument("", "", null); isIE = false; } xml.async = false; xml.load(url); //获取XML文档根节点 var root = xml.documentElement; //获取RSS的XML源中的item节点 var items = root.getElementsByTagName("item"); //建设DOm工具 ——RSS问题 var head = document.createElement("dt"); head.setAttribute("style", "background-color:#ccc;cursor:pointer;"); if (isIE) { //IE时操纵 head.innerHTML = "<b>" + (root.getElementsByTagName("title")[0].text).substring(2, 6) + "</b> <sub>" + root.getElementsByTagName("pubDate")[0].text + "</sub>"; target.appendChild(head); //建设DOm工具 ——RSS列表 var ul = document.createElement("ul"); //把列表添加到DIV容器中 target.appendChild(ul); //轮回输出天天消息到li中,个中items.length是消息条数 for (i = 0; i < items.length; i++) { //建设DOM工具li,存放消息 var li = document.createElement("li"); //建设DOM超链接工具 var lk = document.createElement("a"); //时刻 //超链接的title属性,同时用于生涯消息文本 lk.title = items[i].selectSingleNode("title").text; //配置超链接的href属性 lk.href = items[i].selectSingleNode("link").text; //超链接表现的文本 , 若长于15个字符,则截取,然后加上... lk.innerHTML = lk.title.length > 18 ? lk.title.substring(0, 16) + "....": lk.title; //lk.innerText = lk.title; //把li添加到ul中 ul.appendChild(li); //把超链接添加到li中 li.appendChild(lk); } } else { //非IE时操纵 head.innerHTML = "<b>" + (root.getElementsByTagName("title")[0].textContent).substring(2, 6) + "</b> <sub>" + root.getElementsByTagName("pubDate")[0].textContent + "</sub>"; target.appendChild(head); //建设DOm工具 ——RSS列表 var ul = document.createElement("ul"); //把列表添加到DIV容器中 target.appendChild(ul); //轮回输出天天消息到li中,个中items.length是消息条数 for (i = 0; i < items.length; i++) { //建设DOM工具li,存放消息 var li = document.createElement("li"); //建设DOM超链接工具 var lk = document.createElement("a"); //时刻 //超链接的title属性,同时用于生涯消息文本 lk.title = items[i].getElementsByTagName("title")[0].textContent; //配置超链接的href属性 lk.href = items[i].getElementsByTagName("link")[0].textContent; //超链接表现的文本 , 若长于15个字符,则截取,然后加上... lk.innerHTML = lk.title.length > 18 ? lk.title.substring(0, 16) + "....": lk.title; //lk.innerText = lk.title; //把li添加到ul中 ul.appendChild(li); //把超链接添加到li中 li.appendChild(lk); } } }
表现页面参考源码(存为htm页面)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" href="index.css"> <base target="_blank"> </head> <body> <div> <div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html> <script type="text/javascript" src="rss.js"></script>
CSS源码(存为index.css )
a:link,a:visited,a:active { text-decoration:none; } a:hover { text-decoration:underline; } #pagebody { margin:0 auto; width:800px; height:1200px; border-left:dotted 1px gray; border-right:dotted 1px gray; background-color:#eee; } #header { height:200px; } #banner { height:160px; background-color:#fff; } #content div { width:380px; height:270px; border:solid 1px gray; overflow:hidden; background-color:#fff; } #content div ul li { list-style-image:url(list.gif); } .left { float:left; margin-top:10px; margin-left:10px; } .right { float:right; margin-top:10px; margin-right:10px; }

相干阅读 :
JavaScript操纵XML 行使百度RSS作为消息源示例
javascript行使百度舆图api和html5特征获取赏识器位置
基于JavaScript实现相同于百度学术高级检索成果
JavaScript操纵XML/HTML较量常用的工具属性集锦
JavaScript操纵XML文件之XML读取要领
行使百度舆图api实现按照地点查询经纬度
JavaScript操纵XML实例代码(获取消息问题并分页,并分页)
仿百度的要害词匹配搜刮示例
Javascript里行使Dom操纵Xml
Javascript 实现告白后加载 可加载百度谷歌同盟告白
行使pcs api往免费的百度网盘上传下载文件的要领
基于JavaScript实现高德舆图和百度舆图提取行政区界线经纬度坐标

相关推荐
新闻聚焦
猜你喜欢
热门推荐
返回列表
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。