Javascript小僧："時刻"/"更新日"/"ブラウザ名"/"更新日からの経過時間"を切り替えて表示：崖の上のジョージ：So-netブログ

	ブログをはじめるログイン

Javascript小僧："時刻"/"更新日"/"ブラウザ名"/"更新日からの経過時間"を切り替えて表示　[コンピューター] [編集]

6月16日の記事で紹介した(1)時刻 (2)更新日 (3)ブラウザ名 (4)更新日からの経過時間を切り替えて表示するJavascriptですが。。。

解読をあきらめて、とりあえずコードをそのまま貼り付けます。最低の日曜プログラマと笑ってくらはい。。。

http://blog.so-net.ne.jp/cheese999/2013-06-16

(1)時刻

(2)更新日

(3)ブラウザ名

(4)更新日からの経過時間

【コード】


<html>
<head lang="ja">
<title>更新日/日時の表示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">-->
<!--<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">-->
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style type="text/css">
<!--
.TxtCls1 { text-align: left; border-style: none; color:#000000; background-color:transparent; font-size: 22pt }
.TxtCls2 { text-align: left; border-style: none; color:#999999; background-color:transparent; font-size: 22pt }
-->
</style>
<!--<script type="text/javascript" src="index.js"></script>-->
<!--<script type="text/javascript" src="index2.js"></script>-->
<script language="JavaScript">
<!--
// 周期呼び出し用変数
var T = new Array(10);
	// T[0] - T[6] : スロット
	// T[7] : ページをreload
	// T[8] : 更新日/日時欄の日時
	// T[9] : カウントダウン
// Window open用変数
W1 = "";

// 初期化
function reset2(){
	// 更新日/日時の表示
	ChgDate1(0,null);
}

// 更新日、経過時間、日時を切替
// myMode : 0/1 = 初期化 / 切替
// file1 : 更新日を調べるファイルの名前
function ChgDate1(myMode,file1){
	var string1 = document.getElementById("IdTime0").value;
	var myT = new Date(document.lastModified); // 現在の日時
	var myBrws = getBrws1(); // ブラウザ名
	//if(string1.match(/Date/)&&document.lastModified){
	if(string1.match(/Date/)&&(myMode==1)){
		// 更新日1に切替
		clearInterval(T[8]);
		document.getElementById("IdTime0").className = "TxtCls2";
		document.getElementById("IdTime0").value =
		"Last updated(1):"+YMDHMS1(myT);
	}else if(string1.match(/Last.updated\(1\)/)&&(myMode==1)){
		// 更新日2に切替
		if(myBrws.match(/chrome/i)){
			var myLUp = "yy/mm/dd hh:mm:ss";
		}else{
			var myLUp = myT.toLocaleDateString(document.lastModified); // 更新日2
		}
		document.getElementById("IdTime0").value = "Last updated(2):" + myLUp;
	}else if(string1.match(/Last.updated\(2\)/)&&(myMode==1)){
		// 更新日3に切替
		// ActiveXObject/XMLHttpRequest objectの生成
		var xmlhttp=myFMkOAxXHR1();
		// Last-Modifiedレスポンスヘッダを書き込み
		myFRHLM1(xmlhttp,file1,'IdTime0');
	}else if(string1.match(/Last.updated\(3\)/)&&(myMode==1)){
		// ブラウザ名に切替
		document.getElementById("IdTime0").value = "Browser:"+myBrws;
	}else if(string1.match(/Browser/)&&(myMode==1)){
		// 経過時間(1)に切替
		clearInterval(T[8]);
		T[8] = setInterval("getElTm1(1)",500);
		document.getElementById("IdTime0").className = "TxtCls1";
	}else if(string1.match(/Elapsed.Time\(1\)/)&&(myMode==1)){
		// 経過時間(2)に切替
		clearInterval(T[8]);
		// ActiveXObject/XMLHttpRequest objectの生成
		var xmlhttp=myFMkOAxXHR1();
		// Last-Modifiedレスポンスヘッダを入手
		if(xmlhttp){
			xmlhttp.open('GET',file1);
			xmlhttp.onreadystatechange = function(){
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
					document.getElementById("IdHdmyLtMd1").value
					=xmlhttp.getResponseHeader("Last-Modified");
				}else{
					document.getElementById("IdHdmyLtMd1").value
					=document.lastModified;
				}
			}
			xmlhttp.send(null);
		}
		T[8] = setInterval("getElTm1(2)",500);
	}else if(string1.match(/Elapsed.Time\(2\)/)\|\|(myMode==0)){
		// 日時に切替
		clearInterval(T[8]);
		T[8] = setInterval("DspDate1()",500);
		document.getElementById("IdTime0").className = "TxtCls1";
	}else{
		alert("切替できません。\nブラウザ："+myBrws+"\n[ChgDate1]");
	}
}

// Last-Modifiedレスポンスヘッダを入手
function myFRHLM1(xmlhttp,file1,Id1){
	if(xmlhttp){
		var disp = document.getElementById(Id1);
		xmlhttp.open('GET',file1);
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				var dd=new Date(xmlhttp.getResponseHeader("Last-Modified"));
				disp.value="Last updated(3):"+YMDHMS1(dd);
			}else{
				disp.value="Last updated(3):xxxx年xx月xx日 [x]　xx:xx:xx";
			}
		}
		xmlhttp.send(null);
	}else{
		var dd=new Date(document.lastModified); // 更新日の日付
		disp.value="Last updated(3):"+YMDHMS1(dd);
	}
}

// ユーザーエージェント名 ⇒ ブラウザ判定
function getBrws1(){
	// ユーザーエージェント名を小文字化
	var strUA1 = getUA1().toLowerCase();
	// ブラウザ判定
	if(strUA1.match(/opera/i)){return('Opera')}
	else if(strUA1.match(/msie/i)){return('Internet Explorer')}
	else if(strUA1.match(/epiphany/i)){return('Epiphany(GNOME)')}
	else if(strUA1.match(/chrome/i)){return('Chrome')}
	else if(strUA1.match(/safari/i)){return('Safari')}
	else if(strUA1.match(/applewebkit/i)){return('AppleWebKit')}
	else if(strUA1.match(/firefox/i)){return('Firefox')}
	else if(strUA1.match(/gecko/i)){return('Gecko')}
	else{return('etc')}
}

// ユーザーエージェント名を返す
function getUA1(){
	return(navigator.userAgent);
}

// ActiveXObject/XMLHttpRequest objectの生成
function myFMkOAxXHR1(){
	var xmlhttp=false;
	// IE向け
	try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP.6.0")}
	catch(e){
		try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0")}
		catch(e){xmlhttp=false}
	}
	//try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")}
	//catch(e){xmlhttp=false}
	//try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")}
	//catch(e){xmlhttp=false}
	// IE以外
	if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
		xmlhttp=new XMLHttpRequest();
	}
	return(xmlhttp);
}

// 日時の文字列作成
// Input : 日付オブジェクト(new Date())
// Output : 日時の文字列
function YMDHMS1(myD2){
	// 曜日変数
	var myWeek = new Array("日","月","火","水","木","金","土");
	// 年、月、曜日、日、時、分、秒を算出する。
	var myYear = myD2.getYear();
	var myYear4 = (myYear < 2000) ? myYear+1900 : myYear;
	var myMonth = myD2.getMonth() + 1;
	var myDate = myD2.getDate(); // 日
	var myDay = myD2.getDay(); // 曜日
	var myHours = myD2.getHours();
	var myMinutes = myD2.getMinutes();
	var mySeconds = myD2.getSeconds();
	// 月、日、時、分、秒の桁調整
	if(myMonth < 10){myMonth = "0" + myMonth}
	if(myDate < 10){myDate = "0" + myDate}
	if(myHours < 10){myHours = "0" + myHours}
	if(myMinutes < 10){myMinutes = "0" + myMinutes}
	if(mySeconds < 10){mySeconds = "0" + mySeconds}
	// 日時の文字列を返す
	var string1 = myYear4+"年"+myMonth+"月"+myDate+ "日 [";
	string1 += myWeek[myDay];
	string1 += "]　"+myHours+":"+myMinutes+":"+mySeconds;
	return(string1);
}

// 更新日時から現在までの経過時間(elapsed time)
function getElTm1(mode1){
	// mode1=1: 更新日の日付にdocument.lastModifiedを使用
	// mode1=2: 更新日の日付にgetResponseHeader("Last-Modified")を使用
	// SafariとChromeではdocument.lastModifiedが正しく動かない
	myDT = new Array(2); // 日付オブジェクト
	myDT[0] = new Date(); // 現在の日付
	switch(mode1){
		case 1:
			myDT[1] = new Date(document.lastModified); // 更新日の日付
			break;
		case 2:
			myDT[1] = new Date(document.getElementById("IdHdmyLtMd1").value);
			break;
		default:alert("mode1が範囲外[getElTm1]");break;
	}
	// 経過時間[sec]
	var ElTm1 = Math.floor((myDT[0].getTime() - myDT[1].getTime())/1000);
	// ElTm1から年数を切り出し
	var myYear = Math.floor(ElTm1 / (3652460*60));
	// ElTm1から年数分を引く
	ElTm1 -= myYear * (3652460*60);
	// ElTm1から月数を切り出し
	var myMonth = Math.floor(ElTm1 / (302460*60));
	// ElTm1から月数分を引く
	ElTm1 -= myMonth * (302460*60);
	// ElTm1から日数を切り出し
	var myDay = Math.floor(ElTm1 / (246060));
	// ElTm1から日数分を引く
	ElTm1 -= myDay * (246060);
	// ElTm1から時間を切り出し
	var myHour = Math.floor(ElTm1 / (60*60));
	// ElTm1から時間分を引く
	ElTm1 -= myHour * (60*60);
	// ElTm1から分を切り出し
	var myMinute = Math.floor(ElTm1 / 60);
	// ElTm1から分を引く
	ElTm1 -= myMinute * 60;
	// 経過時間の文字列
	myYear = (myYear<10) ? ("0" + myYear) : myYear;
	myMonth = (myMonth<10) ? ("0" + myMonth) : myMonth;
	myDay = (myDay<10) ? ("0" + myDay) : myDay;
	myHour = (myHour<10) ? ("0" + myHour) : myHour;
	myMinute = (myMinute<10) ? ("0" + myMinute) : myMinute;
	ElTm1 = (ElTm1<10) ? ("0" + ElTm1) : ElTm1;
	var string1 = "Elapsed Time("+mode1+"): " + myYear + "/" + myMonth + "/" + myDay
					+ " " + myHour + ":" + myMinute + ":" + ElTm1;
	document.getElementById("IdTime0").value = string1;
}

// 日時を表示する
function DspDate1(){
	document.getElementById("IdTime0").value =
	"Date:"+YMDHMS1(new Date());
}

// 更新日/日付のHelp
function myHelp1(){
	var myHelpMes = new Array(4); // Help message
	myHelpMes[0] = "<td colspan='2'><b>--- 更新日/日付フィールド ---</b></td>";
	myHelpMes[1] = "<td><b>切替</b></td><td>文字をクリックすると、";
	myHelpMes[1] += "<span class='red1'>更新日</span>(Last updated)、";
	myHelpMes[1] += "<span class='red1'>経過時間</span>(Elapsed Time)";
	myHelpMes[1] += "と<span class='red1'>日付</span>(Date)を切替えます。</td>";
	myHelpMes[2] = "<td><b>更新日</b></td><td>SafariとChromeでは";
	myHelpMes[2] += "<span class='red1'>document.lastModified</span>が";
	myHelpMes[2] += "正しく動かず、更新日に変な値が表示されます。</td>";
	myHelpMes[3] = "<td><b>経過時間</b></td>";
	myHelpMes[3] += "<td>更新時から今までの経過時間を表示します。書式は年/月/日時:分:秒です。";
	myHelpMes[3] += "1年は<span class='red1'>365日</span>、";
	myHelpMes[3] += "1か月は<span class='red1'>30日</span>で計算しているので概算です。</td>";
	OpHelp1("更新日/日付",myHelpMes);
}

// Helpウィンドウを開く
function OpHelp1(title1,mes1){
// Function : Open a Help window
// Input :
// title1 :
// mes1[] : array of error message
// Return :
// true
	w1 = window.open("","Help","width=0,height=0"); // dummy
	w1.close();
	w1 = window.open("","Help","width=290,height=220,resizable=yes,scrollbars=yes,location=no");
	var myID;
	var myName;
	var i = 0;
	w1.document.write("<html>");
	w1.document.write("<head lang='ja'>");
	var string1 = "<title>"+title1+"</title>";
	w1.document.write(string1);
	w1.document.write("<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>");
	w1.document.write("<!--<meta http-equiv='Content-Type' content='text/html'; charset='Shift_JIS'>-->");
	w1.document.write("<!--<meta http-equiv='Content-Type' content='text/html'; charset='EUC-JP'>-->");
	w1.document.write("<!--<script type=\"text/javascript\" src=\"index.js\"></script>-->");
	w1.document.write("<!--<script type=\"text/javascript\" src=\"index2.js\"></script>-->");
	w1.document.write("<style type='text/css'>");
	w1.document.write("<!--");
	w1.document.write(".red1 { color: red; font-weight: bold; }");
	w1.document.write("-->");
	w1.document.write("</style>");
	w1.document.write("</head>");
	// バックグラウンドカラーを決める
	// 0 - 4の乱数
	var NBgCl1 = Math.floor(Math.random() * 5);
	// 色配列(水色,ピンク,紫,黄緑,黄)
	var ABgCl1 = new Array("#ccffff","#ffccff","#ccccff","#ccffcc","#ffffcc");
	w1.document.write("<body bgcolor='"+ABgCl1[NBgCl1]+"'>");
	w1.document.write("<a name='top'></a>");
	w1.document.write("<form name='myHelp1'>");
	w1.document.write("<table table border='2' bordercolorlight='#cccccc' bordercolordark='#333333'>");
	for(i=0; i<mes1.length; i++){
		if(mes1[i] != ""){
			w1.document.write("<tr>");
			w1.document.write(mes1[i]);
			w1.document.write("</tr>");
		}
	}
	w1.document.write("</table></form><hr><table border='0'><tr><td align='left'>");
	w1.document.write("<a href='javascript:function voi(){};voi()' onClick='window.close()'>");
	w1.document.write("<img src='gif/close2_org.gif'></a>");
	w1.document.write("</td></tr></table>");
	w1.document.write("</body>");
	w1.document.write("</html>");
	return true;
}
// -->
</script>
</head>
<body background="gif/kabe.gif" text="#000000" lang="ja" onload="reset2(null)">
<a name="top"></a>
<div id="IdTitle"></div>
<noscript>
<h2>
<img src="gif/warning01.gif" border="0" alt="注意" height="50" width="56" align="absmiddle">
このページは、Javascriptを使用しています。
</h2>
</noscript>
<div align="center">
<table border="0"><tr><td>
<a href="javascript:function voi(){};voi()"
		onClick="ChgDate1(1,'update.html')"><form>
<input type="text" id="IdTime0" size="55" class=TxtCls1
	name="NMTime0" value="Date:yyyy年mm月dd日 [x]　hh:mm:ss" readonly>
</form></a>
</td><td>
<a href="javascript:function voi(){};voi()" onClick="myHelp1()">
<img src="gif/hatena05.gif" alt="Help" height="33" width="33"></a></td></tr></table>
</div>
<!-- 隠しform:更新日時 -->
<form>
<input type="hidden" name="NmHdmyLtMd1" id="IdHdmyLtMd1" value="0"><!-- 更新日時 -->
</form>
</body>
</html>

タグ：JavaScript HTML

2013-07-20 20:51 ヤバイぜ！(7) コメント(2) トラックバック(2)
共通テーマ：日記・雑感

ヤバイぜ！ 7

ご訪問＆コメントありがとうございます＾＾

おおー！私にはまったく解らない世界です（汗）...
時節ご自愛下さい。（＾＾）
by alba0101 (2013-07-21 09:26)

alba0101さん、ありがとうございます。

今日、更新日3と経過時間(2)が表示されない理由を調べていたのですが、サーバ側から「Last-Modifiedレスポンスヘッダ」が返送されない場合があるということが分かりました。。何のことやら、ですね。[__猫]

nice!ありがとうございます。
by cheese999 (2013-07-21 17:00)