JavascriptとXMLを使って指定した日時の間だけメッセージを表示します。仕事で運営しているECサイトで指定された日時の間だけサーバーメンテナンスのお知らせを表示することになりました。しかも立て続けに2回!!いちいち差し替えるのは面倒なので指定した日時になったら自動的にメッセージの表示・非表示をするスクリプトを作りました。 XMLないの<news>~</news>を増やすことで複数のメッセージが表示できます。
※XMLの解析にKawa.netさんの JKL.ParseXMLを使用しています。こちらからライブラリをダウンロードしてください。
→ライブラリのダウンロード
Javascriptのソース
<script>
<!--
//ニュース情報が入ったXMLファイル
var url = "news.xml";
//XML解析オブジェクト
var xml = new JKL.ParseXML( url );
//表示メッセージ
var message="";
//XMLデータ読み込み
var data = xml.parse();
//今日の日付ゲット
date = new Date();
var y = String(date.getFullYear());
var mt = String(date.getMonth() + 1);
if(mt.length<=1) mt = "0"+mt;
var d = String(date.getDate());
if(d.length<=1) d = "0"+d;
var h = String(date.getHours());
if(h.length<=1) h = "0"+h;
var today = Number(y+mt+d+h);
if(data!=null){
//データ数分繰り返す
for(var i = 0;i < data["data"]["news"].length; i++){
//開始時日ゲット
var s_date = data["data"]["news"][i]["sdate"];
//終了日時ゲット
var e_date = data["data"]["news"][i]["edate"];
//開始・終了日時生成
s_date = s_date.replace("/", "");
s_date = s_date.replace("/", "");
s_date = s_date.replace("/", "");
e_date = e_date.replace("/", "");
e_date = e_date.replace("/", "");
e_date = e_date.replace("/", "");
s_date = Number(s_date);
e_date = Number(e_date);
//指定日時内ならメッセージ表示
if((today >= s_date) && (today <= e_date)){
//メッセージの最初だけ
if(message==""){
message = "<div id='news'>";
}
message += data["data"]["news"][i]["title"]+"<br>";
message += data["data"]["news"][i]["description"];
message += data["data"]["news"][i]["ps"]+"<br><br>";
}//if
}//for
//表示するメッセージがあれば表示
if(message!=null){
message+="</div>";
document.write(message);
}
}//if
//--></script>
XMLファイル <data> <news> <!--2005年11月19日0時から--> <sdate>2005/11/19/00</sdate> <!--2005年11月22日9時まで表示--> <edate>2005/11/22/08</edate> <!--メッセージのタイトル--> <title> サーバメンテナンスのお知らせ</title> <!--メッセージ本文--> <description> メッセージです。 </description> <!--追記がある場合はこちらに--> <ps> </ps> </news> </data>
**** Javascript参考書 ****
古い入門書しか持っていないので新しく購入したいなぁ。Javascriptといったら古旗さんの本は外せませんね。
→改訂第3版 JavaScriptポケットリファレンス Pocket reference
→速効!図解プログラミング JavaScript
→JavaScript逆引きクイックリファレンスfor Windows & Macintosh
それ以外のおすすめ
→JavaScriptビジュアル・リファレンス
By take 2006/9/11 月曜日 - 16:37:52
これは素晴らしいものを見つけた!と思ったのですが、うまく表示されませんね〜。
http://take.studiosc.jp/inform/news.html
こんな感じでは無いですかぁ?
By 管理人 2006/9/13 水曜日 - 1:37:03
takeさん
バグってました。そしてまだバグってます。
空っぽでいいのでxmlの方の<news>〜</news>を2つにしてみてください。
By take 2006/9/13 水曜日 - 17:20:16
表示されました!ありがとうございます。
今後とも、素晴らしいものを公開してくださいね。