ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript は、ニュース ソースとして Baidu RSS を使用して XML を操作します。 example_javascript スキル

JavaScript は、ニュース ソースとして Baidu RSS を使用して XML を操作します。 example_javascript スキル

WBOY
リリース: 2016-05-16 17:56:15
オリジナル
1153 人が閲覧しました

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/women.xml",
家: "xml/house.xml",
車: "xml/car.xml",
スポーツ: "xml/sport.xml",
edu: "xml/edu.xml"
}
function Init() {
LoadXml( RssSource.movi​​e, main[0]);
LoadXml(RssSource.women, main[1]);
LoadXml(RssSource.house, main[2]); [3]);
LoadXml(RssSource.sport, main[4]);
}
関数 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); = false;
}
xml .async = false;
xml.load(url);
//XML ドキュメントのルート ノードを取得します
var root = xml.documentElement; //RSS XML ソース内の項目ノードを取得します
var items = root.getElementsByTagName("item");
//DOm オブジェクトを作成します - RSS title
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 = 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");
//Time
//ハイパーリンクの 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 = "" (root.getElementsByTagName("title")[0].textContent) 2, 6) " " root.getElementsByTagName("pubDate")[0].textContent "";
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");
//時間
//タイトルハイパーリンクの属性はニュース テキストの保存にも使用されます
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; 🎜>//li を ul
ul .appendChild(li)
//li にハイパーリンクを追加
li.appendChild(lk);
}
}


显示页面参照源码(htm页面存続)
复制代码代码如下:

























CSS ソースコード(index.css に保存)
复制代码 代码如下:

a:link,a:visited,a:active {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#pagebody {
margin:0 auto;
幅:800ピクセル;
高さ:1200ピクセル;
border-left:点線 1px グレー;
border-right:点線 1px グレー;
背景色:#eee;
}
#header {
高さ:200px;
}
#banner {
高さ:160px;
背景色:#fff;
}
#content div {
width:380px;
高さ:270ピクセル;
ボーダー: 実線の 1px グレー;
オーバーフロー:非表示;
背景色:#fff;
}
#content div ul li {
list-style-image:url(list.gif);
}
.left {
float:left;
マージントップ:10px;
マージン左:10px;
}
.right {
float:right;
マージントップ:10px;
margin-right:10px;
}
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート