JavaScript는 Baidu RSS를 뉴스 소스로 사용하여 XML을 작동합니다. example_javascript 기술

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"
* 여성:"http://news.baidu.com/n?cmd=1&class=healthnews&tn=rss"
* 집:"http://news.baidu .com/n?cmd=1&class=housenews&tn= rss"
* 자동차:"http://news.baidu.com/n?cmd=1&class=autonews&tn=rss"
* 스포츠:"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 = {
영화: "xml/movie.xml",
여자: "xml/woman.xml",
집: "xml/house.xml",
자동차: "xml/car.xml",
스포츠: "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 소스에서 항목 노드 가져오기
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) "" root.getElementsByTagName("pubDate")[0].text "";
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 객체 생성
var li = document.createElement("li")
//DOM 하이퍼링크 객체 생성
var lk = document.createElement("a");
//Time
//하이퍼링크의 title 속성은 뉴스 텍스트를 저장하는 데에도 사용됩니다
lk.title = items[i].selectSingleNode("title ").text;
//하이퍼링크 설정 href 속성
lk.href = items[i].selectSingleNode("link").text;
//하이퍼링크에 의해 표시되는 텍스트인 경우 15자보다 길면 가로채서 추가됩니다...
lk.innerHTML = lk.title.length > ? lk.title.substring(0, 16) "....": lk. title;
//lk.innerText = lk.title
//ul에 li 추가
ul.appendChild(li)
//li에 하이퍼링크 추가
lk);
}
} else { //IE
head.innerHTML = "" (root.getElementsByTagName("title")[0].textContent).substring( 2, 6) " _{" root.getElementsByTagName("pubDate")[0].textContent "}"
target.appendChild(head); /DOm 객체 생성 - RSS 목록
var ul = document.createElement("ul")
//DIV 컨테이너에 목록 추가
target.appendChild(ul)//Loop 매일 뉴스를 li로 출력합니다. 여기서 items .length는 뉴스 항목 수입니다
for (i = 0; i < items.length; i ) {
//뉴스를 저장할 DOM 객체 li 생성
var li = document.createElement("li" );
//DOM 하이퍼링크 객체 생성
var lk = document.createElement("a")
//Time
//제목 하이퍼링크의 속성은 뉴스 텍스트를 저장하는 데에도 사용됩니다.
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; 🎜>//ul에 li 추가
ul .appendChild(li);
//li에 하이퍼링크 추가
li.appendChild(lk); 🎜>
<” 🎜 >

<머리>

CSS源码(存为index.css )




复system代码


代码如下:

a:link,a:visited,a:active {
텍스트 장식:없음;
}

a:hover { 텍스트 장식:밑줄; } #pagebody { margin:0 auto; 폭:800px; 높이:1200px;

테두리 왼쪽:점선 1px 회색;

테두리 오른쪽:점선 1px 회색;
배경색:#eee;
}
#header {
높이:200px;
}
#banner {
높이:160px;
배경색:#fff;
}
#content div {
너비:380px;
높이:270px;
테두리:단색 1px 회색;
오버플로:숨김;
배경색:#fff;
}
#content div ul li {
list-style-image:url(list.gif);
}
.left {
float:left;
여백 상단:10px;
왼쪽 여백:10px;
}
.right {
float:right;
여백 상단:10px;
여백-오른쪽:10px;
}